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>

你没有用<script type="text/javascript">开始你的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>

并且错过了$（文件）的结尾.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>

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

3 个答案: