1

我正在使用以下代码（我在其他地方找到并尝试修改以满足我的需要）来创建一个从右侧滑到我的屏幕上的 div。当我单击而不是悬停时，我将如何让它滑出？在此先感谢您的帮助。

jQuery(function($) {
$(document).ready(function() {
    $('#introbutton').hover(function() {
        $('#intro-container').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
    });

    jQuery('#introbutton').hover(function() {
        // Do nothing
    }, function() {

        jQuery.noConflict();
        jQuery('#intro-container').animate({
            left: '100%'
        }, 800);

    });
});
});
4

2 回答 2

2

尝试使用 on.() 即

$('#introbutton').on('click', function() {
    // do whatever here
});

编辑

$('#introbutton').on('click',function(){
    $('#intro-container').stop(true, false).animate({'left': '0px'}, 900);
});

您也可以按照 TheSmose 使用 click 作为 on() 的“快捷方式”- 但请记住

.on() 是从 jQuery 1.7 开始进行所有事件绑定的推荐方法。它将 .bind() 和 .live() 的所有功能整合到一个函数中，当您向其传递不同的参数时，该函数会改变行为。

于 2012-11-22T18:10:34.087 回答
1

好吧，而不是使用

 
 $('#introbutton').hover(function(){})

利用

 
  $('#introbutton').click(function(){})

当然，你必须意识到，与hover不同，它会返回到之前的状态，在click函数运行后，div 不会返回到原来的状态。您可能希望将其纳入整体解决方案。

希望这可以帮助。

编辑

此代码段解决了所有问题

 
var is_show = true;
jQuery(function($) {
  $(document).ready(function() {
    $("#introbutton").click(function(){return runFunction();});    
  });
});


function runFunction(){
    if (is_show){ //show div
        is_show = false;
        $('#intro-container').animate({
            'left': '0px'
        }, 900);       
    }
    else{ //hide div
        is_show = true;
        $('#intro-container').animate({
            'left': '100%'
        }, 800);         
    }
    return false;
}
于 2012-11-22T18:24:44.707 回答