jquery - 特定のウィンドウ幅より上でのみトグルアニメーション

Question

Toggle-Event を使用したいのですが、ウィンドウが特定のサイズよりも広い場合のみです。ただし、DIV は常に表示されている必要があります。私のソリューションは機能しますが、ウィンドウのサイズを変更すると、if ステートメントがトリガーされなくなります。

ヒントはありますか？リンクは次のとおりです。 http://jsfiddle.net/mihaene/wMrjc/

Answer 1

わかりました、私があなたの問題を理解したと仮定して、私は自分の解決策を投稿します: http://jsfiddle.net/5bxLS/

var toggleOn = false;
var toggleState = 0;
function slideIn() {
     toggleState = 1;
     $("#slider").stop().animate({bottom: "-20px"}, 300);
};
function slideOut() {
    toggleState = 0;
    $("#slider").stop().animate({bottom: "-180px"}, 300) ;
};
function setToggle() {
    if(!toggleOn) {
        $('#slider').toggle(slideIn, slideOut);
        toggleOn = true;
    }
};
function clearToggle() {
    if(toggleOn) {
        if(toggleState === 1)
            $('#slider').click();        
        $('#slider').off('click');   
        toggleOn = false;
    }
};
function evalToggle() {
    if ($(window).width() > 500)
        setToggle();
    else
        clearToggle();
};
    //Apparently this does not work in webkit based browsers...
/*$(window).resize(evalToggle);
evalToggle();*/
    //But this works:
    $(window).resize(evalToggle).resize();

トグルを停止するには、イベント (この場合はクリック イベント) のバインドを解除する必要があります。クリック イベントは、トグルを実行するイベントでもあります。最初にトグルを有効にできるようにソリューションを構築します (ウィンドウのサイズによって異なります)。さらに、ウィンドウを小さくすると、トグル状態がオンに設定されていれば、スムーズに移行できました。これがあなたが探していたものであることを願っています！