0

css3トランジションを一時停止しようとしているので、一時停止ボタンがクリックされたときに問題の要素が正確なcssプロパティを維持します。私が考えている方法は、移行中に要素の CSS プロパティを取得し、.css() でそれらを設定することですが、これは機能しますか? 移行中に要素の CSS プロパティを取得するにはどうすればよいですか。

HTML

 <div id="productimage">        
   </div>
<a href="#" id="pause">Pause</a>

CSS

    #productimage {
        position:absolute;
        height: 550px;
        width: 393px;
        background-image: url("../img/blusen.jpg");
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-color: #fff;
        background-size:396px 600px;
        top:191px;
        left:10px;
    }


#productimage.step1 {
    background-size:1500px 2275px;
    -webkit-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; -o-transition: all 2.5s ease-in-out;
}

Jクエリ

$("#pause").click(function(e) {
         e.preventDefault();
        $('#productimage').addClass('step1');
}
4

2 に答える 2

0

jQuery .stop の使用を検討しましたか? コールバックを使用して、animate() などの特定のイベントの最後までスキップすることもできます。

ドキュメントは次の場所にあります: http://api.jquery.com/stop/

また、ページの下部を見てください。あなたの状況によく当てはまると思うonclick .stopイベントを使ったデモがあります。

于 2013-08-28T13:24:22.707 に答える