製作切換

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); 
};