jQuery切換幻燈片動畫

我已經創建了自定義切換幻燈片動畫。它的工作正常，但不會在第一次點擊時滑動。如果你點擊地圖箭頭，你會看到切換類將適用於它，但地圖不會滑動。但如果你再點擊兩次，它會滑動。jQuery切換幻燈片動畫

我很新的jquery，我也搜索了很多，但沒有找到任何解決方案。這是代碼;

$('.map_btn').click(function() { 
    $('.map_btn').toggleClass('toggle'); 

    $('.map_btn').on('click', function() { 
     $('.map_wrapper').stop().animate({ 
      opacity: 1, 
      height: 420 
     }); 
    }); 
    $('.map_btn.toggle').on('click', function() { 
     $('.map_wrapper').stop().animate({ 
      opacity: 0, 
      height: 0 
     }); 
    }); 
});

http://jsfiddle.net/h2fh6/

來源

2012-06-24 Umair Razzaq

你爲什麼要設置點擊後'$。對（）'方法是什麼？只有在第一場火災時，這只是一個負責人。那是你的問題。將它們移出第一個'$ .click（）'。 –

與您當前的解決方案的問題是，類在toggleClass()，也是事實，你已經嵌套在click處理程序.map_btn另一個click處理程序中的越來越搞砸了某處相同的元素。

因此，流程會有點混亂。

你可以試試這個，

$('.map_btn').toggle(function() { 
    $('.map_btn').toggleClass('toggle'); 
    $('.map_wrapper').stop().animate({ 
     opacity: 1, 
     height: 420 
    }); 
}, function() { 
    $('.map_btn').toggleClass('toggle'); 
    $('.map_wrapper').stop().animate({ 
     opacity: 0, 
     height: 0 
    }); 
});

只能使用.toggle()，這樣你就不必寫2種獨立的方法。

小提琴鏈接 - http://jsfiddle.net/h2fh6/20/

你可以閱讀更多關於撥動here

來源

2012-06-24 07:53:34

感謝您的幫助。我真的學到了很多，謝謝 –

太棒了。很高興聽到:-)請接受任何有助於回答您問題的答案。將來會鼓勵人們幫助你。這是如何工作的:-) –

除非你所需要的東西的其他類只使用.toggle()。

$('.map_btn').toggle(function() { 
    $('.map_wrapper').stop().animate({ 
     opacity: 1, 
     height: 420 
    }); 
},function() { 
    $('.map_wrapper').stop().animate({ 
     opacity: 0, 
     height: 0 
    }); 
});

我真的覺得他們應該有一個名爲此功能toggleClick。

來源

2012-06-24 07:33:31 iambriansreed

感謝它現在正常工作。 –

@ user1398384：我認爲這不會改變圖標動畫（藍色箭頭 - >切換上的灰色箭頭）。看到我的答案與這些工作。 –

我不是在處理程序中重新查詢的人。 –

你可以試試這個

$('.map_btn').toggle(function() { 
$('.map_btn').toggleClass('toggle'); 
$('.map_wrapper').stop().animate({ 
    opacity: 1, 
    height: 420 
}); 
},function() { 
$('.map_btn').toggleClass('toggle'); 
$('.map_wrapper').stop().animate({ 
    opacity: 0, 
    height: 0 
}); 
});

來源

2012-06-24 07:36:34 chaosguru

每次發生這種情況時，您都需要在必須設置處理程序之上調度兩個新查詢。保存，重用，私人範圍超出使用範圍（請參閱我的回答以及我如何緩存贏得'$ .load（）'閉包的示例）。 –

下面的代碼應與你的圖標動畫工作！

http://jsfiddle.net/epinapala/h2fh6/19/

$('.map_btn').toggle(function() { 
    $('.map_btn').toggleClass('toggle'); 
    $('.map_wrapper').stop().animate({ 
     opacity: 1, 
     height: 420 
    }); 
},function() { 
    $('.map_btn').toggleClass('toggle'); 
    $('.map_wrapper').stop().animate({ 
     opacity: 0, 
     height: 0 
    }); 
});

來源

2012-06-24 07:42:07

以下是一張就可以了，與獲得回顧了選擇的緩存（和明顯的封閉範圍，這就是爲什麼我把在那裏$(window).load();），你將會有更好的整體表現。

如果您正在進行動畫製作，則必須緩存。你必須。不要在重新選擇的jQuery對象調用（如$('.map_wrapper').stop().animate()）上反複製作動畫。它效率低下，只能在必要時完成，因爲DOM已被修改並需要查找當前狀態。

如果在按鈕上找到.toggle，我的方法就是用新設置切換effect變量。簡單，可靠。有時，從Google地圖加載iframe似乎有些滯後。這在jsFiddle環境中可能是不可避免的。

$(window).load(function(){ 
    var $mapbtn = $('.map_btn'), 
     $wrapper = $('.map_wrapper'); 

    $mapbtn.click(function() { 
     var $this = $(this), 
      effect = { opacity: 0, height: 0 }; 

     $this.toggleClass('toggle'); 

     if ($this.is('.toggle')) { 
      effect.opacity = 1; 
      effect.height = 420; 
     } 

     $wrapper.stop().animate(effect); 
    }); 
});

http://jsfiddle.net/userdude/h2fh6/21/

來源

2012-06-24 07:51:55

jQuery切換幻燈片動畫

回答

相關問題