jQuery slideToggle帶標誌動畫

我試圖從着陸頁的極端頂部創建抽屜。我還在頁面的頂部中心邊緣設置了一個徽標。因此，當用戶點擊抽屜扳機時，抽屜應該打開徽標，徽標將其位置更改爲margin-top: some value;，以使徽標垂直和水平地位於抽屜底部邊緣的中心。
jQuery slideToggle帶標誌動畫

我有這樣的jQuery代碼：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script> 
$(document).ready(function(){ 
$(".button").click(function(){ 
$(".topHidden").slideToggle(); 
$(".logo").animate({marginTop:'-50px'}, 1000, 'swing'); 
}) 
}); 
</script>

我已經做了開口部分，但找不出關閉部件來獲得標誌回到其正常位置。請參閱jsfiddle

來源

2013-10-22 user1250285

釷和所有人一樣，不同的方法，相同的結果。當抽屜關閉時，我們可以阻止徽標出去嗎？當抽屜打開和關閉時，您可能還注意到搖晃/跳躍效果，我們如何解決這個問題？ – user1250285

我編輯了您的jquery代碼。這裏是代碼。

$(document).ready(function(){ 
     var switchtemp=0; 
     $(".button").click(function(){ 
      $(".topHidden").slideToggle(); 
      if(switchtemp==0){ 
      $(".logo").animate({marginTop:'-50px'}, 1000, 'swing'); 
       switchtemp=1; 
      }else{ 
      $(".logo").animate({marginTop:'0px'}, 1000, 'swing'); 
       switchtemp=0; 
      } 
     }) 
    });

檢查演示在這裏：http://jsfiddle.net/59Shq/

來源

2013-10-22 10:33:06

你可以這樣來做：

$(".button").click(function(){ 
    $(".topHidden").slideToggle(); 
     var margin=$('.logo').css('margin-top'); 
     if(margin=='0px') 
     $(".logo").animate({marginTop:'-50px'}, 1000, 'swing'); 
     else 
     $(".logo").animate({marginTop:'0px'}, 1000, 'swing'); 
})

演示Fiddle

來源

2013-10-22 10:34:00 Greenhorn

檢查這一項http://jsfiddle.net/Aveendra/t22NL/4/

$(document).ready(function(){ 
     $(".button").click(function(){ 
      $(".topHidden").slideToggle(); 
      if($('.logo').attr('toggle')== '0'){ 
       $(".logo").animate({marginTop:'-50px'}, 1000, 'swing'); 
       $('.logo').attr('toggle','1'); 
      }else{ 
       $(".logo").animate({marginTop:'0px'}, 1000, 'swing'); 
       $('.logo').attr('toggle','0'); 
      }  
     }) 
    });

來源

2013-10-22 10:40:00

jQuery slideToggle帶標誌動畫

回答

相關問題