javascript - 简单的 jQuery 问题

Question

我有一个垂直 jquery 滑块的代码块。

基本上我需要的是，当点击#expert_button 时，它会向下滑动，然后当再次点击它时，它会向上滑动。

我确实尝试了各种荒谬/无效的结果，包括不断下滑，页面加载时所有事情都发生了。你的名字。

在我选择另一种爱好之前 - 是否有机会指出我做错了什么？将不胜感激！

$('#expert_button').toggle(function() {
$('#expert_slider').animate({
    top: '+=245'
    }, 458, 'swing', function() {
}),
$('#expert_slider').animate({
    top: '-=245'
    }, 458, 'swing', function() {
    });
});

Answer 1

嘿包括迁移库。您可以从 jquery.com 下载它并像包含 jquery 库一样包含它。包括 migrate.js 和你的代码将工作

Answer 2

使用这个clickToggle插件

(function ($) {
    $.fn.clickToggle = function (func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function () {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));
$('#expert_button').clickToggle(function () {
    $('#expert_slider').animate({
        top: '+=245'
    }, 458, 'swing', function () {})
},

function () {
    $('#expert_slider').animate({
        top: '-=245'
    }, 458, 'swing', function () {});
});

Answer 3

如果您所追求的只是一个简单的滑动切换，那么 jQuery 有一个“快捷方式”方法： http: //api.jquery.com/slideToggle/

这是从 API ( jsFiddle ) 派生的示例：

<button id="the-button">Toggle</button>
<div id="the-panel">
    This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!
</div>
<script>
    $('#the-button').on('click', function (e) {
        $('#the-panel').slideToggle("slow");
    });
</script>

如果您包含一个缓动库，您还可以将缓动函数更改为更有趣的东西。