Question

我有一个用于幻灯片放映的js代码：

var frameWidth = 0;
var slideCount = $this.children(".slide-frame").length;
var $currentFrame, $nextFrame;
var renderNext = function () {
    var moveCount = 0;
    // get next frame
    if ($currentFrame.next(".slide-frame").length === 0) {
        $nextFrame = $(".slide-frame").eq(0);
    } else {
        $nextFrame = $currentFrame.next(".slide-frame");
    }
    // move next frame to the right before current frame
    $nextFrame.css({"display": "block"}, {"left": frameWidth}); // why this string works once on first timer tick???
    // all frames move animation
    $(".slide").children(".slide-frame").animate({"left": "-=" + frameWidth}, 700, function () {
        moveCount++;
        // wait for all frames animation complete
        if (moveCount === slideCount) {
            // make new current frame from next frame
            $currentFrame = $nextFrame;
        }
    });
};

frameWidth = $(".slide").width(); // get frame width
$(".slide").children(".slide-frame").width(frameWidth); // set fixed width for all frames
$currentFrame = $(".slide").children(".slide-frame").eq(0); // get first current frame
$currentFrame.css({"display": "block"});

if (slideCount > 0) { // run slide show
    setInterval(renderNext, 2000);
}

和CSS / LESS：

.slide{
    overflow: hidden;
    position: relative;
    .slide-frame{
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
    }
}

HTML：

<div class="slide">
    <a class="slide-frame" id="frame-00" href="#">
        <img class="frame-image" alt="" src="/img/slide-index/slide-frame-0.jpg">
    </a>
    <a class="slide-frame" id="frame-01" href="#">
        <img class="frame-image" alt="" src="/img/slide-index/slide-frame-1.jpg">
    </a>
</div>

字符串$nextFrame.css({"display": "block"}, {"left": frameWidth});仅在首次使用计时器“滴答”时有效，并且所有帧都向左移动而不更改$ nextFrame的正确位置（其桅杆在$ currentFrame之前向右移动）。

为什么对象css参数“ left”没有改变？

Answer 1

问题解决了！

元素“ .slide”及其cildren继承了CSS过渡属性。 jQuery animate（）与CSS转换无法同时正常工作

jQuery在位置.animation（..）之后通过.css（..）将div位置更改

1 个答案: