jQuery UI不會隱藏元素

我想創建一個jQuery幻燈片效果，以便按下按鈕時，第一個段落標記移出，第二個段落標記移動到視口中。我使用jQuery用戶界面的幻燈片效果，我似乎無法隱藏第二段，然後將其滑入，然後隱藏第一段。jQuery UI不會隱藏元素

HTML：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <script type="text/javascript" src="test.js"></script> 
    </head> 

<body> 
    <button onclick="hideme()">Hide it</button> 
    <p id="1">Hide this text</p> 
    <p id="2"> Show this text</p> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
</body> 
</html>

的Javascript：

$(window).load(function() { 
    $('#2').fadeOut(1); 
}); 

function hideme(){ 
    $('#1').hide("slide", 2000); 
    $('#2').show("slide", 2000); 
}

來源

2013-10-16 musha1

你不應該讓你的ID以數字開頭。 –

如果它現在適合你，請選擇一個正確的答案。 – Ringo

使用此：

$(document).ready(function(){ 
    $('#2').fadeOut(1); 

    $('button').on('click', function() { 
     $('#1').hide("slide", 2000); 
     $('#2').show("slide", 2000); 
    }); 
});

這使用jQuery的.on()功能的click綁定事件當DOM準備使用$(document).ready(function(){...});操縱它執行。

這是它的工作原理：http://jsfiddle.net/VEY2B/

來源

2013-10-16 19:36:50 Joe

我試圖從jsfiddle中移植所有的代碼，但我似乎無法讓它做任何事情？ – musha1

@ user2855971 - 你仍然需要包含jQuery和jQuery UI的鏈接，它們是否仍然包含在你的代碼中？ – Joe

這裏是我試圖讓它工作的例子，但我沒有運氣，否則你的代碼完美工作，它似乎只是這個例子：http://jsfiddle.net/R9nGM/4/ – musha1

$(window).load(function() { 
    $('#text-2').fadeOut(2000); 
    $('#hide-it-button').click(function() { 

     $('#text-1').hide("slide", 2000, function() { 
      $('#text-2').show("slide", 2000); 
     }); 
    }); 
});

來源

2013-10-16 19:21:41 Ringo

然後它無法做任何事情。 – musha1

您正在使用.hide（）和.show（）不正確。請在jsfiddle上發佈你的代碼，所以我可以看到如何修復它 – Ringo

http://jsfiddle.net/4MEBZ/ – musha1

window.load可能不是jQuery的動作偵聽器綁定到該按鈕的最佳時機。我重新寫它，因爲這： http://jsfiddle.net/gyJPc/

$(document).ready(function() { 
    $('#2').fadeOut(5); 

    $('button').click(function(){ 
     hideme(); 
    }); 

    var hideme = function(){ 
     $('#1').hide(); 
     $('#2').show(); 
    }; 
});

來源

2013-10-16 19:32:37 ochi

更新小提琴添加過渡時間http://jsfiddle.net/gyJPc/1/ – ochi

jQuery UI不會隱藏元素

回答

相關問題