切換寬度調整大小動畫 - jquery

Question

我有<div id="test"></div>和<a id="trigger"></a>。 Div的寬度爲300px。當用戶單擊觸發器時，我希望div將其寬度重新調整爲100px，並且當用戶再次單擊觸發器時，要將大小重新調整爲以前的大小。我如何使這個使用jquery？

在此先感謝... :)

blasteralfred

Answer 1

指定的1變量爲點擊0爲取消選中，然後使用。點擊功能如下：

$(document).ready(function(){ 
    TriggerClick = 0; 

    $("a#trigger").click(function(){ 
    if(TriggerClick==0){ 
     TriggerClick=1; 
     $("div#test").animate({width:'100px'}, 500); 
    }else{ 
     TriggerClick=0; 
     $("div#test").animate({width:'300px'}, 500); 
    }; 
    }); 
}); 

UPDATE - 更好的答案

予一段時間作出這個建議背部;但相信有一個更優雅和實用的方法來解決這個問題。你可以使用CSS過渡和有jQuery的簡單的添加/刪除啓動過渡類：

工作小提琴： https://jsfiddle.net/2q0odoLk/

CSS：

#test { 
    height: 300px; 
    width: 300px; 
    background-color: red; 

    /* setup the css transitions */ 
    -webkit-transition: width 1s; 
    -moz-transition: width 1s; 
    transition: width 1s; 
} 

#test.small { 
    width: 100px; 
} 

的jQuery：

$("a#trigger").on('click', function(){ 
    $("div#test").toggleClass('small'); 
}); 

Answer 2

您需要綁定的。點擊（） - 事件到#trigger和切換動畫。

http://api.jquery.com/toggle/

Answer 3

像這樣的東西應該給的伎倆。

$('#trigger').bind('click', function() { $('#test').animate({"width": "100px"}, "slow"); }) 

Answer 4

這是開關的Html Part：

<div id="start"> 
    <div class="slide"></div> 
</div> 

這是CSS part爲：

<style> 
    #start{ margin-bottom:60px; display:block; font-size:16px; width:14px; height:79px; position:relative; top:25px; line-height:21px; color:#F0F; background:url(./start1.JPG) left top no-repeat;}  
    .slide{ background:#98bf21; max-width:500px; width:100; height:100px;position:absolute; left:14px;} 
</style> 
    <script> 
     $(document).ready(function() 
     { 
      function tog() 
      { 
       var w = $(".slide").css('width'); 

       if(w=='0px') 
       { 
        $(".slide").animate({ 
        width:500 
       }); 
      } 
      else 
      { 
       $(".slide").animate({ 
       width:0 
       }); 
      } 
     } 

     $("#start").click(function() 
     { 
      tog(); 
     }); 
     }); 
    </script> 

Answer 5

對於那些尋找一個較短，但還沒有工作的版本，你可以這樣做：

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    var w = ($('div#test').width() == 300 ? 100 : 300); 
    $('div#test').animate({width:w},150); 
}); 

最短的版本：

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    $('div#test').animate({width:($('div#test').width() == 300 ? 100 : 300)},150); 
}); 

關於功能：

function toggleWidth(target, start, end, duration) { 
    var w = ($(target).width() == start ? end : start); 
    $(target).animate({width:w},duration); 
    return w; 
} 

用法：

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    toggleWidth($("div#test"), 300, 100, 150); 
}); 

最後一個JQuery.fn。擴展功能：

jQuery.fn.extend({ 
    toggleWidth: function(start, end, duration) { 
     var w = ($(this).width() == start ? end : start); 
     $(this).animate({width:w},duration); 
     return w; 
    } 
}); 

用法：

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    $("div#test").toggleWidth(300, 100, 150); 
}); 

你已經張貼了這個問題在這裏