4

我创建了自定义切换幻灯片动画。它按预期工作正常，但在第一次点击时不会滑动。如果您单击地图箭头，那么您将看到切换类将应用于它，但地图不会滑动。但如果你再点击两次，它就会滑动。

我对 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/

4

5 回答 5

3

除非您需要该课程来做其他事情，否则请使用.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-24T07:33:31.627 回答
1

你可以试试这个

$('.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-24T07:36:34.677 回答
0

下面的代码应该适用于您的图标动画！

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

​</p>

于 2012-06-24T07:42:07.273 回答
0

这是我的看法，通过缓存被调用的选择器（以及明显的闭包范围，这就是我将其$(window).load();放在那里的原因），您将获得更好的整体性能。

如果您正在制作动画，则必须缓存。你必须。不要在重新选择 jQuery 对象调用（如$('.map_wrapper').stop().animate(). 它效率低下，只应在必要时进行，例​​如当 DOM 已被修改并需要查找当前状态时。

如果在按钮上找到 ，我的方法只是effect用新设置切换变量。.toggle简单、可靠。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-24T07:51:55.277 回答
0

您当前解决方案的问题是类在某处变得混乱，toggleClass()而且您已经在同一元素的另一个处理程序中嵌套了一个click处理程序。.map_btnclick

因此，流程有点混乱。

你可以试试这个

$('.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/

您可以在此处阅读有关切换的更多信息

于 2012-06-24T07:53:34.213 回答