制作切换

Question

你好，我有以下HTML：

​​

而下面的jQuery：

$(document).ready(function() { 
    $('#second').hide(); 
    $('span.slide1').click(function() { 
     $('#second').slideToggle(800); 
     return false; 
    }); 
}); 

我如何可以从左侧的隐藏的div切换和节目？

我的意思是当我点击元素时，我想让div出现在span元素的左边。

这是我到目前为止有：

http://jsfiddle.net/gVjFs/70/

Answer 1

可以达到这样的效果：http://jsfiddle.net/gVjFs/70/

<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">I’m not a good</span> 

<a href="#" class="slide1" style="float: left;">Behavior</a> 

    $(document).ready(function() { 
     $('.slide1').click(function() { 
      $('#second').animate({ 
       width: '100px', 
      }, 1000); 
     }); 
    }); 

Answer 2

我想你只是需要一些CSS样式来做到这一点。

.slide1 { 
    display:inline-block; 
} 
.content1{ 
    display:inline-block; 
} 

这里是updated JS Fiddle

干杯。

编辑：刚刚看了一遍答案，它看起来你希望它出现在左侧，关于以前的遗憾，但与CSS，你可以做到这一点罚款以及

.slide1 { 
    display:inline-block; 
} 
.content1{ 
    float:left; 
} 

New JS Fiddle

Answer 3

请尝试以下操作。你将需要effects从jquery-ui，但正如我可以看到你的jsfiddle，你正在使用它。

$(document).ready(function() { 
    $('#second').hide(); 
    $('span.slide1').click(function() { 
     $('#second').effect('slide', 500); 
     return false; 
    }); 
}); 

看到http://jsfiddle.net/gVjFs/73/

Answer 4

有两种方法可以做到这一点，一个还需要jQuery用户界面，另一个仅jQuery的。

没有jQuery用户界面：

$(document).ready(function() { 
    $('#second').hide(); 
    $('span.slide1').click(function() { 
     $('#second').animate({width:'toggle'},800);; 
     return false; 
    }); 
}); 

jsFiddle example。本示例使用.animate（）更改宽度。

---

使用jQuery UI

$(document).ready(function() { 
    $('#second').hide(); 
    $('span.slide1').click(function() { 
     $('#second').show("slide", { direction: "left" }, 800); 
     return false; 
    }); 
}); 

jsFiddle example。这个例子使用jQuery UI的效果方法。

Answer 5

尝试这样

.slide1 { 
display:inline-block; 
} 
.content1{ 
display:inline-block; 
float: left; 
} 

See Demo

Answer 6

您可以创建一个自定义动画，像这样的：

jQuery.fn.blindToggle = function(speed, easing, callback) { 
    var h = this.outerWidth(); 
    return this.show().animate({marginLeft: parseFloat(this.css('marginLeft')) < 0 ? 0 : -h}, speed, easing, callback); 
};