1

.animate() を使用して、div を画面の左側にスライドさせようとしています。最初は機能しますが、その後スライドしません。のみ。なぜそれが機能しないのか、またはより良い解決策についての提案は素晴らしいでしょう:)

編集: 現在、以下の関数は onclick と呼ばれています。

$(function() {
  toggleMobileMenu = function() {
    var menu = $('#mobile-side-menu');

    if( menu.css('left', -250) ) {
        menu.animate({left: 0}, 400, function(){
            positionValue = 0;
        });
    } else { 
        menu.animate({'left': '-250'},400);
    }
  }
});
4

4 に答える 4

2

.css()jQuery オブジェクトを返すセッターとしてメソッドを使用しており、JavaScript ではオブジェクトが真の値であるため、コードはそのelse部分に到達しません。そのはず：

if ( menu.css('left') === '-250px' ) {
   // ... 
}
于 2013-09-14T23:50:55.320 に答える
0

以下は、あなたが何を望んでいるのかを正しく理解していれば、アニメーションを行う別の方法です。

このフィドルを参照してください: http://jsfiddle.net/ZEH5b/

主にこのビット...

$(function() {
    var block = $("#block");
    var slid = false;
    block.click(toggleMobileMenu);

    function toggleMobileMenu() {
        if (slid) {
            block.animate({left: "+=250"}, 400, function () { slid = false; });
        }
        else {
            block.animate({left: "-=250"}, 400, function() { slid = true; });
        }
    }
});

ボタンでトリガーされるアニメーションは、比較的簡単にメニューに適用できると思います。

于 2013-09-15T00:01:23.080 に答える
0

css と div の id タグを変更する onclick イベントだけでこれを簡単に行うことはできません。

#itemclicked{
transition:0.5s; /*also do transitions specific for webkit, moz etc...search google for css transitions*/

margin-left:-250px;
/*and the rest of the css*/
}

そしてオンクリック

onclick="javascript:document.getElementById('item').value='itemclicked'"
于 2013-09-15T00:03:16.677 に答える