jQuery - 在加載時隱藏div，在動畫完成後顯示

Question

我只在一兩個月前開始編碼，而且遇到了一個我似乎無法找到解決方案的問題。

我有一個幻燈片，當點擊一個按鈕時會打開，我遇到的問題是幻燈片本身（'右控制'）的控件中的一個在頁面加載時可見。

當幻燈片顯示打開時，我需要將其與幻燈片一起淡入，然後在關閉幻燈片時隱藏。

任何幫助，將不勝感激。

這裏有一個幻燈片中的代碼：

//幻燈片

$("#slideshow").css("overflow", "hidden"); 

manageControls(currentPosition); 

$('.control').click(function() { 

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1; 

    manageControls(currentPosition); 

    $('#slides').animate({ 
     'left': slideWidth * (-currentPosition) 
    }, 600); 
}); 

function manageControls(position) { 

    if (position === 0) { 
     $('#left-control').hide(); 
    } else { 
     $('#left-control').show(); 
    } 

    if (position == slidesNumber - 1) { 
     $('#right-control').hide(); 
    } else { 
     $('#right-control').show(); 
    } 
} 
//End Slideshow 

這裏是我的jsfiddle與全碼：

http://jsfiddle.net/tVsjY/2/

Answer 1

發現什麼，我需要做一個變通方法。

由於manageControls函數隱藏/取決於#slides的當前位置，顯示左/右控制所有需要做隱藏。控制上的負載也隱藏#slides。

所以，如果我穿上9號線以下：

$("#center, #slideshow, .slide").hide(); 

然後.show它的點擊 - 它的作品！

最新的更新：

添加以下行，使其美觀applealing的眼睛（控制現在淡入視圖）：

$(".control").stop(true).delay(1800).animate({opacity: "0.5"}, 2000); 

    $(".control").stop(true).animate({opacity: "0"}, 400); 

這是我更新的jsfiddle：

http://jsfiddle.net/tVsjY/18/

詩這還不算漂亮，當幻燈片被激活時，這兩個控件需要淡入淡出。將在下一個工作，然後發佈更新。

Answer 2

我感到有點羞愧給人一種修復，而不是的解決方案給剛剛開始編碼的人，但也許這就是你想要的。把下面的你的jsfiddle的第50行應該修復你的問題通過隱藏的額外可見跨度：

$('.control').hide(); 

但我不太滿意這樣做的原因是因爲我學不到，爲什麼跨度首先顯示出來給大家解釋一下。我可能會繼續關注它，但是讓我知道這是否只是你要找的。

---

更新的解決方案：發現問題/解決方案 你躲在manageControls功能/顯示控件將始終隱藏一個，並顯示一個。

問題：兩個控件首先都是可見的。
您最初調用manageControls（currentPosition）;在第38行，currentPosition的值爲0，所以左側控件被隱藏，然後顯示右側，這已經是可見的開始。

解決方案：替換manageControls（currentPosition）;上線38以下：

$('.control').hide(); //Hides both controls 

讓我知道，如果一切正常/有道理:)

Answer 3

。在你的

function manageControls(position){} 

一個邏輯上的錯誤。您使用的功能爲了兩個目的。

1. 顯示/隱藏根據左/右控制上滑動你是
2. 顯示/隱藏取決於是否滑塊是可見的或隱藏的左/右控制。

但它始終工作，如果它是第一個場景。我的建議是簡單地爲你的函數添加另一個參數。

function manageControls(position, flag){} 

在「顯示」，「隱藏」和「檢查」用於示出兩種控制，隱藏對照和滑動號顯示與標誌寄值。然後根據情況重新編寫函數調用。

設置。控制在CSS中「無」 display屬性。並在js中進行以下更改。

$(document).ready(function() { 

var out = 0; 
var currentPosition = 0; 
var slideWidth = 400; 
var slides = $(".slide"); 
var slidesNumber = slides.length; 

$("#button").click(function() { 

    if (out === 0) { 
     manageControls(currentPosition, 'show'); // Show controls on slide show 
     $("#center, #slideshow, .slide").animate({ 
      width: "400px" 
     }, { 
      queue: false, 
      duration: 1900 
     }); 
     $(".slide").delay(2000).animate({ 
      opacity: "1" 
     }, 1500); 
     out = 1; 
    } else { 
     manageControls(currentPosition, 'hide'); // Hide controls on slide hide 
     $("#center, #slideshow, .slide").animate({ 
      width: "0px" 
     }, { 
      queue: false, 
      duration: 2000 
     }); 
     $(".slide").stop(true).animate({ 
      opacity: "0" 
     }, 250); 
     out = 0; 
    } 
}); 

//Slideshow 
$("#slideshow").css("overflow", "hidden"); 

// No need for this line if .control set to hidden in css. 
//manageControls(currentPosition); 

$('.control').click(function() { 

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1; 

    manageControls(currentPosition, 'check'); // Show/hide controls on control click 

    $('#slides').animate({ 
     'left': slideWidth * (-currentPosition) 
    }, 600); 
}); 

function manageControls(position, flag) { 
    // Checks for control display 
    if (flag == 'check') { 
     if (position === 0) { 
      $('#left-control').hide(); 
     } else { 
      $('#left-control').show(); 
     } 

     if (position == slidesNumber - 1) { 
      $('#right-control').hide(); 
     } else { 
      $('#right-control').show(); 
     } 
    } else if (flag == 'show') { 
     $('.control').show(); 
    } else if (flag == 'hide') { 
     $('.control').hide(); 
    } 
} 
//End Slideshow 
}); 

但是您需要檢查您的代碼。這可能是你是初學者，但你應該始終致力於優化你的代碼。你的代碼需要。