如何停止圖像滑塊上的動畫文本

Question

我不知道如何複製和粘貼jquery或javascript。嘗試阻止我的文字在載入幻燈片時跳入頁面。我只想讓它出現在幻燈片上，不需要動畫。

// Speed of the automatic slideshow 
var slideshowSpeed = 5000; 

// Variable to store the images we need to set as background 
// which also includes some text and url's. 
var photos = [ { 
    "title" : "Learn More", 
    "image" : "nature.jpg", 
    "url" : "#", 
    "firstline" : "Hello There", 
    "secondline" : "How are you doing today?" 
}, { 
    "title" : "View Products", 
    "image" : "biking.jpg", 
    "url" : "#", 
    "firstline" : "Need Great Product", 
    "secondline" : "See our full selection of goods" 
}, { 
    "title" : "Buy Now", 
    "image" : "vacation.jpg", 
    "url" : "#", 
    "firstline" : "Here is the product", 
    "secondline" : "So buy it up or you will be sorry" 
} 
]; 


$(document).ready(function() { 

// Backwards navigation 
$("#back").click(function() { 
    stopAnimation(); 
    navigate("back"); 
}); 

// Forward navigation 
$("#next").click(function() { 
    stopAnimation(); 
    navigate("next"); 
}); 

var interval; 
$("#control").toggle(function(){ 
    stopAnimation(); 
}, function() { 
    // Change the background image to "pause" 
    $(this).css({ "background-image" : "url(images/btn_pause.png)" }); 

    // Show the next image 
    navigate("next"); 

    // Start playing the animation 
    interval = setInterval(function() { 
     navigate("next"); 
    }, slideshowSpeed); 
}); 


var activeContainer = 1;  
var currentImg = 0; 
var animating = false; 
var navigate = function(direction) { 
    // Check if no animation is running. If it is, prevent the action 
    if(animating) { 
     return; 
    } 

    // Check which current image we need to show 
    if(direction == "next") { 
     currentImg++; 
     if(currentImg == photos.length + 1) { 
      currentImg = 1; 
     } 
    } else { 
     currentImg--; 
     if(currentImg == 0) { 
      currentImg = photos.length; 
     } 
    } 

    // Check which container we need to use 
    var currentContainer = activeContainer; 
    if(activeContainer == 1) { 
     activeContainer = 2; 
    } else { 
     activeContainer = 1; 
    } 

    showImage(photos[currentImg - 1], currentContainer, activeContainer); 

}; 

var currentZindex = -1; 
var showImage = function(photoObject, currentContainer, activeContainer) { 
    animating = true; 

    // Make sure the new container is always on the background 
    currentZindex--; 

    // Set the background image of the new active container 
    $("#heroimg" + activeContainer).css({ 
     "background-image" : "url(images/" + photoObject.image + ")", 
     "display" : "block", 
     "z-index" : currentZindex 
    }); 

    // Hide the hero text 
    $("#slider-btns").css({"display" : "none"}); 

    // Set the hero text 
    $("#firstline").html(photoObject.firstline); 
    $("#secondline") 
     .attr("href", photoObject.url) 
     .html(photoObject.secondline); 
    $("#btn-click") 
     .attr("href", photoObject.url) 
     .html(photoObject.title); 


    // Fade out the current container 
    // and display the header text when animation is complete 
    $("#heroimg" + currentContainer).fadeOut(function() { 
     setTimeout(function() { 
      $("#slider-btns").css({"display" : "block"}); 
      animating = false; 
     }, 300); 
    }); 
}; 



// We should statically set the first image 
navigate("next"); 

// Start playing the animation 
interval = setInterval(function() { 
    navigate("next"); 
}, slideshowSpeed); 

}); 

Answer 1

文本反彈，因爲在圖像切換過程中，您會隱藏＃slider-btns div，並在圖像切換後顯示它。
由於文本是在＃slider-btns div之後堆疊的，因此當您隱藏＃slider-btns時文本會上升，並且當您顯示文本時，文本會消失。