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不会隐藏元素

回答

相关问题