Question

是否可以添加css更改的持续时间，以便在更改div的左侧，顶部，宽度和高度时可以设置动画？

在jQuery代码中，我想为css属性的持续时间设置动画。

非常感谢你能帮助我，感激不尽！

我的代码

HTML：

<div id="slideshow">
    <img class="image1" src="images/car1.jpg"></img>
    <img class="image2" src="images/car2.jpg"></img>
    <img class="image3" src="images/car3.jpg"></img>
    <img class="image4" src="images/car4.jpg"></img>
    <img class="image5" src="images/car5.jpg"></img>
</div>

CSS：

#slideshowshadow{
    background: yellow;
    border-radius: 100px;
    width: 700px;
    height: 500px;
    position: absolute;
    opacity: 0.2;
    margin: 50px 50px;
    box-shadow: 0px 0px 100px 15px yellow;
    -moz-box-shadow: 0px 0px 100px 15px rgba yellow;
    -webkit-box-shadow: 0px 0px 100px 15px yellow;
}

#slideshow{
    width: 800px;
    height: 600px;
    margin: 0 auto;
    position: relative;
}

#slideshow img{
    color: white;
}

.image2, .image3, .image4, .image5{
    position: absolute;
    width: 300px;
    height: 200px;
}

.image1{
    position: absolute;
    width: 350px;
    height: 250px;
    top: 175px;
    left: 225px;
    z-index: 2;
}

.image2{
    top: 0px;
    left: 250px;
    z-index: 1;
}

.image3{
    top: 200px;
    left: 500px;
    z-index: 1;
}

.image4{
    top: 400px;
    left: 250px;
    z-index: 1;
}

.image5{
    top: 200px;
    left: 0px;
    z-index: 1;
}

JQUERY（这就是魔术发生的地方：p）：

$(".image2").click(function(){

        $(".image1").css("top", "0px");
        $(".image1").css("left", "250px");
        $(".image1").css("width", "300px");
        $(".image1").css("height", "200px");
        $(".image1").css("z-index", "1");

        //middle
        $(".image2").css("top", "175px");
        $(".image2").css("left", "225px");
        $(".image2").css("width", "350px");
        $(".image2").css("height", "250px");
        $(".image2").css("z-index", "2");

        $(".image3").css("top", "200px");
        $(".image3").css("left", "500px");
        $(".image3").css("width", "300px");
        $(".image3").css("height", "200px");
        $(".image3").css("z-index", "1");

        $(".image4").css("top", "400px");
        $(".image4").css("left", "250px");
        $(".image4").css("width", "300px");
        $(".image4").css("height", "200px");
        $(".image4").css("z-index", "1");

        $(".image5").css("top", "200px");
        $(".image5").css("left", "0px");
        $(".image5").css("width", "300px");
        $(".image5").css("height", "200px");
        $(".image5").css("z-index", "1");
    });

Answer 1

你应该使用动画，其中5000是以毫秒为单位的时间。

$( ".image5" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "25px"
    // css goes here, last one should not have comma
  }, 5000, function() {
    // Animation complete.
  });

或者使用CSS动画，通过jQuery设置CSS过渡时间：

var time = 5000

$('.image5').css({
    'webkitTransition': 'all ' + time + 's ',
    'mozTransition': 'all ' + time + 's ',
    'msTransition': 'all ' + time + 's ',
    'oTransition': 'all ' + time + 's ',
    'transition': 'all ' + time + 's '
});

Answer 2

也许您正在寻找：

transition-duration

请参阅：http://css-tricks.com/almanac/properties/t/transition-duration/了解更多详情

如何为css更改添加动画时间

2 个答案: