jQuery切换滑动动画

Question

jQuery切换滑动动画

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/

- Umair Razzaq

为什么你在点击之后设置 $.on() 方法？那只是在第一次触发时进行设置。这就是你的问题所在。将它们移到第一个 $.click() 之外。 - Jared Farrish

5个回答

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

- chaosguru

1

每次触发时，您都会在设置处理程序之上调度两个新查询。保存、重用、私有作用域超出使用范围（请参见我的答案以及如何在 $.load() 闭包中缓存的示例）。 - Jared Farrish

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

- Eswar Rajesh Pinapala

0

这是我的看法，使用重复调用的选择器缓存（和显而易见的闭包作用域，这就是为什么我把 $(window).load(); 放在那里）可以提高整体性能。

如果你正在进行动画操作，必须进行缓存。不要像 $('.map_wrapper').stop().animate() 这样不断重新选择jQuery对象进行动画，这是低效的，只有在需要时才应该这样做，例如当DOM已被修改并需要查找当前状态时。

我的方法只是切换 effect 变量，并在按钮上找到新的设置进行切换。简单可靠。有时似乎会出现轻微的滞后，因为iframe从Google Maps加载。在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/

- Jared Farrish

0

你目前的解决方案存在问题，是因为在 toggleClass() 中类别出现了混乱，而且你还将一个 click 处理程序嵌套在另一个相同元素的 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()，您就不必编写两个单独的方法。

Fiddle链接 - http://jsfiddle.net/h2fh6/20/

您可以在这里阅读更多关于toggle的内容

- painotpi

1

太好了。很高兴听到这个 :-) 请接受任何有帮助回答你问题的答案。这将鼓励人们在未来帮助你。这就是SO的工作方式 :-) - painotpi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iambriansreed · Accepted Answer

如果你不需要该类来实现其他功能，可以使用.toggle()方法。

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

我真的认为他们应该将这个函数命名为 toggleClick 。