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

查询

$("#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 回答
0

您可以通过复制由过渡更改的属性、将属性设置为那些更改的属性，然后删除为其设置动画的类来暂停过渡。当然，如果您使用相同的对象进行动画/暂停，则需要为第一次单击设置动画，然后在下次单击时暂停。

注意：!important CSS 属性中的是background-size必需的，除非您有一个比 jQuery 选择器更层次的动画类选择器，也就是div #productimage.step1 {类似于#productimage.step1 {. 由于#productimage和#productimage.step1都是一个级别，因此您的示例需要!important

我采用了这种方法并提出了这个示例 jsFiddle

/* jQuery */
var image = $("#productimage");
$("#pause").click(function (e) {
    e.preventDefault();
    if(!image.hasClass('step1'))
    {
        image.addClass('step1');
    }
    else {
        var css = image.css("background-size"); // Get the changed attribute(s)
        image.css({'background-size': css}); // Set the changed attribute(s)
        image.removeClass('step1');
    }
});

/* Changed CSS */
#productimage.step1 {
    -webkit-transition: all 2.5s ease-in-out;
    -moz-transition: all 2.5s ease-in-out;
    -o-transition: all 2.5s ease-in-out;
    background-size:1500px 2275px !important;    
}
于 2013-08-28T13:51:46.103 回答