JQuery change div position by .css(..) after position .animation(..)

Question

I have a js code for slideshow:

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

and 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>

String $nextFrame.css({"display": "block"}, {"left": frameWidth}); works only on first timer "tick" and all frames move left without correct $nextFrame position changing (it mast move to the right before $currentFrame).

Why object css parameter "left" is not change?

Answer 1

Problem solved!

Element ".slide" and its cildren inherited CSS transition properties. JQuery animate() does not work correctly simultaneously with CSS transitions