0

状況は次のとおりです。

トランジションなしでクリックするとある場所に移動し、すぐに別の場所に移動する必要がある要素がありますが、現在はトランジションがあります。

まず、私は次のように試しました：

var transform = Modernizr.prefixed('transform'),
    transition = Modernizr.prefixed('transition'),
    style1 = {},
    style2 = {};

style1[transform] = "translate(100px, 20px)";
style1[transition] = "none"; 
style2[transform] = "translate(500px, 50px)";
style2[transition] = "2s"; 

$('div')
    .on('click', function () {
        $(this)
          .css(style1)
          .css(style2);
    });

http://jsfiddle.net/trajektorijus/vUUb5/2/

しかし、それはうまくいきませんでした...誰かが理由を説明できますか?

やりたいことはできましたが、それが正しい方法だとは思いません：

var transform = Modernizr.prefixed('transform'),
    transition = Modernizr.prefixed('transition'),
    style1 = {},
    style2 = {};

style1[transform] = "translate(100px, 20px)";
style1[transition] = "none"; 
style2[transform] = "translate(500px, 50px)";
style2[transition] = "2s"; 

$('div')
    .on('click', function () {
        $(this)
            .css(style1)
            .delay()
            .queue(function () {
                $(this)
                    .css(style2)
                    .dequeue();
            });
    });

http://jsfiddle.net/trajektorijus/vUUb5/3/

これよりもスマートなものを提案できますか？

ありがとう！

編集:別のオプションは次のとおりです。

var $this = $(this);

$this.css(style1);
setTimeout(function () { $this.css(style2); });

http://jsfiddle.net/trajektorijus/vUUb5/5/

4

1 に答える 1

0

このようなもの？

http://jsfiddle.net/vUUb5/4/

$(function () {
    $('div').on('click', function () {
        $(this).css({top: '20px', left: '100px' })
            .animate({ top: '50px', left: '500px' }, 2000);
    });
});
于 2013-02-23T19:16:22.550 に答える