javascript - Jquery-UI 隐藏和显示效果不起作用

Question

我无法在 jquery ui 中使用一些即爆炸效果隐藏我的 div，它总是向下滑动（或类似的东西），无论我在代码中作为参数放置什么效果。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
$(document).ready(function(){

$('.rozwin').click(function(){
    $('#main').hide('explode');
    $('#main').show('explode');  
});  

<a href="" class="rozwin>hide and show</a>

<div id='main'>...</div>

Answer 1

这段代码有很多错误。

此脚本 src 缺少http:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>

您不以 javascript 开头<script type="text/javascript">，因此您的所有 jQuery 都被解释为纯文本。

$(document).ready(function(){

您不会阻止单击的默认操作。

$('.rozwin').click(function(){
    $('#main').hide('explode');
    $('#main').show('explode');  
});  

你没有附上你的.ready()...

您的锚标记的类没有结束引号。

<a href="" class="rozwin>hide and show</a>

<div id='main'>...</div>

这是包含它需要的所有修复的代码段。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.rozwin').click(function(e){
            e.preventDefault();
            $('#main').hide('explode');
            $('#main').show('explode');  
        });  
    });
</script>

<a href="" class="rozwin">hide and show</a>
<div id='main'>...</div>

请记住，您的节目事件不会按预期工作，因为它们触发得太快，因为您没有在.hide().

http://jsfiddle.net/zq2Hz/

Answer 2

第一行错过了http：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

并错过了 $(document).ready(function(){

$(document).ready(function(){ 
   $('.rozwin').click(function(){
     $('#main').hide('explode');
     $('#main').show('explode');  
   });   
}); //at the end

Answer 3

你错过了类的右大括号和右引号

$(document).ready(function(){
   $('.rozwin').click(function(){
      $('#main').hide('explode');
      $('#main').show('explode');  
   }); 
});
<a href="" class="rozwin">hide and show</a>