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

on（）への「ショートカットメソッド」としてTheSmoseに従ってクリックを使用することもできますが、注意してください

.on（）は、jQuery1.7以降のすべてのイベントバインディングを実行するための推奨される方法です。.bind（）と.live（）の両方のすべての機能を1つの関数にまとめ、さまざまなパラメーターを渡すと動作を変更します。

于 2012-11-22T18:10:34.087 に答える
1

まあ、使用する代わりに

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

使用する

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

もちろん、前の状態に戻るホバーとは異なり、クリック関数が実行された後、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 に答える