自动jquery效果（不想要）

时间：2017-07-13 18:37:41

标签： jquery hide show jquery-effects

我创建了一个简单的显示/隐藏菜单：当您单击一个按钮时，当前选项卡会隐藏，另一个显示。我设置了'fade'效果，但正在发生一些幻灯片和其他效果。这是codepen上的示例。我想应用除了淡化之外的其他东西但是现在要解决我提出的这个问题。我不知道为什么要这样做。有人可以帮忙吗？ :)谢谢！

＆＃13;
＆＃13; 
// Tab function
$(".titab.home").click(function() {
  $(".tab").hide("fade");
  $(".tab.home").show("fade");
});
$(".titab.contact").click(function() {
  $(".tab").hide("fade");
  $(".tab.contact").show("fade");
});
$(".titab.submit").click(function() {
  $(".tab").hide("fade");
  $(".tab.submit").show("fade");
});
$(".titab.links").click(function() {
  $(".tab").hide("fade");
  $(".tab.links").show("fade");
});
＆＃13; 
/*edit scrollbar*/

::-webkit-scrollbar-thumb {
    height:auto;
    background-color:#6b6d6d;
}
 
::-webkit-scrollbar {
    height:4px;
    width:3px;
    padding-right:2px;
    background-color:white;
}


#s-m-t-tooltip {
    max-width:300px;
    padding:5px 5px 5px 6px;
    margin:20px 0px 0px 20px;
    background-color:#6b6d6d;
    font-family:arial;
    font-size:9px;
    letter-spacing:2px;
    text-transform:lowercase;
    font-weight:bold;
    color:#fff;
    z-index:99999999;
}

 
body {
    background:#eee;
    margin:0px;
    color:#000000;
    font-family:arial;
    font-size:10px;
    line-height:100%;
}
   
/*edit links*/

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:#000000;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}
 
/*edit link hover*/

a:hover {
    color:#ddd;
    outline:none;
    -moz-outline-style:none;
    text-decoration:none;
}
 
img {
    border:none;
}
 
blockquote {
    padding-left:5px;
    border-left:2px solid #000000;
 
}
 
blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}
 
h1 {
    font-size:8px;
    text-align:left;
    font-family:arial;
    letter-spacing:1px;
    color:#000000;
}
 
h2 {
    font-size:8px;
    font-family:arial;
    text-align:left;
    letter-spacing:1px;
    color:#000000;
}


#topbar {
  display: inline-block;
  top: 0;
  left:0;
  width:100%;
  height: 80px;
  position:fixed;
  background: black;
}


#title {
  color:#fff;
  font-family: 'Unica One';
  font-size:18px;
  font-weight:bold;
  line-height: 80px;
  padding-left: 10px;
} 

.tabs {
  margin: 0 auto;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-194.5px;
  width:389px;
  height:100%;
}
.titab{
  cursor: pointer;
  background:white;
  width:80px;
  height:80px;
  font-size: 17px;
  text-align:center;
  line-height:80px;
  display: inline-block;
  margin-left: 20px;
}
.titab:first-of-type {
  margin-left:0;
}
.tab {
  display:none;
}
.tab iframe{
  margin-top:100px;
  width:400px;
}
.link {
  width:100px;
  margin:auto;
  margin-top: 100px;
}
.tilink{
  background:#fff;
  padding:10px;
  font-size:15px;
  border:1px solid #888;
  border-radius:5px 5px 0 0;
}
.link a{
  display:block;
  background:#fff;
  padding:5px;
  border:1px solid #aaa;
  border-top:none;
}
 
 
.entries {
    padding:20px;
    width:500px;
    margin:auto;
}
 
.post {
    width:500px;
    padding-bottom:40px;
}
 
 
/* POST INFO */ 

.postinfo {
    margin-top:20px;
    margin-bottom:1px;
    margin-left:-12px;
    padding-bottom:4px;
    width:500px;
    text-align:left;
    font-family:arial;
    text-transform:lowercase;
    font-size:10px;
   
    }
 
.postinfo a {
    color:#000000;
    }
   
.postinfo a:hover {
    color:#ddd;
    }
   
/*tags*/ 

.tags {
    width:500px;
    margin-top:4px;
    margin-left:-3px;
    padding:2px;
    font-family:arial;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
     
    }
   
.tags a {
    color:#000000;
    }
   
.tags a:hover {
    color:#ddd;
    }
   
.postnote {
    width:500px;
    margin-top:40px;
    font-family:arial;
    text-transform:lowercase;
    font-style:normal;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
  }
   
/*asks*/  

#question {
    font-size:11px;
    font-style:none;
    font-family:arial;
    letter-spacing:0px;
    text-align:left;
    padding-top: 7px;
    padding-bottom: 7px;    
    padding-left:9px;
    background:#fff;
    color:#000 ;
   
}
 
#question a{
    color:#000;
   
}
 

 
/*audio player container*/ 

.playercontainer {
    text-align:left;
    padding:10px;
    padding-left:0px;
    background-color:#fff;
    width:480px;
}

/*artist, song, etc.*/ 

.musicinfo {
    padding-top:7px;
    padding-left:50px;
    color:#000;
    text-align:justify;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>THEMES</title>
  <link rel="shortcut icon" href="https://assets.tumblr.com/images/default_avatar/sphere_closed_128.png">
  <link rel="alternate" type="application/rss+xml" href="https://themesforyou.tumblr.com/rss">
  <link href="https://fonts.googleapis.com/css?family=Unica+One" rel="stylesheet">



  <div id="topbar">
    <div id="title">Themes for you</div>

    <div class="tabs">
      <div class="titab home">Home</div>
      <div class="titab contact">Contact</div>
      <div class="titab submit">Submit</div>
      <div class="titab links">Links</div>

    </div>

  </div>

  <div class="tab home">
    <div class="entries">
      <div class="post">


        <iframe width="500" height="281" id="youtube_iframe" src="https://www.youtube.com/embed/LKn_3jOKCd8?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" frameborder="0" allowfullscreen=""></iframe>
        <p>Video example</p>


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913245268/video-example">5:17 pm</a>       </div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/video-post">#video post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>


        <div class="postnote">

        </div>
      </div>
      <div id="post">


        <iframe src="https://w.soundcloud.com/player/?url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F4595620&amp;visual=true&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;origin=tumblr" frameborder="0"
          allowtransparency="true" class="soundcloud_audio_player" width="500" height="500"></iframe>
        <p>Song example</p>


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913201693/song-example">5:16 pm</a>       <a href="http://soundcloud.com/rodrigovaz/johann-sebastian-bach-pachelbels-cannon-in-d-major">source</a></div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/song-post">#song post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>


        <div class="postnote">

        </div>
      </div>
      <div id="post">


        <h1>Chat example</h1><b>Someone:</b> Hello!<br><b>Somebody:</b> How are you?<br><b>Someone:</b> Good. This is an example of a chat between two people<br>


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913135663/chat-example">5:14 pm</a>       </div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/chat-post">#chat post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>


        <div class="postnote">

        </div>
      </div>
      <div id="post">


        <h1><a href="http://t.umblr.com/redirect?z=http%3A%2F%2Ffr.lipsum.com%2F&amp;t=NzM2ZDBmOWE1MjkxNjE3ZWE4MTVjZWY0YjhkMmYwYzA5MzFlMTcxOSxXMUV1V2RJNg%3D%3D&amp;b=t%3Aug0c1iN6GrzkGIMg-nJ8Ww&amp;p=https%3A%2F%2Fthemesforyou.tumblr.com%2Fpost%2F162913065653%2Florem-ipsum-all-the-facts-lipsum-generator&amp;m=1">Lorem Ipsum - All the facts - Lipsum generator</a></h1>
        <p>Link example</p>


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913065653/lorem-ipsum-all-the-facts-lipsum-generator">5:12 pm</a>       </div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/link-post">#link post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>


        <div class="postnote">

        </div>
      </div>
      <div id="post">


        <big><b>"This is what a quote looks like"</b></big>
        <p></p>— Source


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913036513/this-is-what-a-quote-looks-like">5:11 pm</a>       </div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/quote-post">#quote post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>


        <div class="postnote">

        </div>
      </div>
      <div id="post">


        <a href="https://themesforyou.tumblr.com/image/162913004603"><img src="https://68.media.tumblr.com/cf975a46b1a6b0183ea6e5017f56271c/tumblr_oszxhlV6bZ1wuevxyo1_500.png"></a>
        <p>Photo example</p>


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162913004603/photo-example">5:10 pm</a>       </div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/photo-post">#photo post</a>  <a href="https://themesforyou.tumblr.com/tagged/post-example">#post example</a>  </div>


        <div class="postnote">

        </div>
      </div>
      <div id="post">

        <h1><big><big>Text example</big></big></h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur eget massa at mattis. Nulla ullamcorper massa ante, et bibendum sem ultricies et. In hac habitasse platea dictumst. Suspendisse tempus orci ex, fermentum accumsan velit pulvinar
          a. Pellentesque vehicula, felis non fermentum suscipit, sem velit scelerisque urna, eu placerat velit lectus ut metus. Duis molestie scelerisque convallis. In ornare libero ipsum, eget rhoncus velit viverra a. Maecenas facilisis tellus metus,
          ac consequat tellus tristique et. Aenean eu neque eu erat euismod euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in maximus ipsum.</p>
        <p>Nullam ac dui et augue rhoncus condimentum facilisis in orci. Aenean sit amet metus magna. Mauris eu pellentesque velit. Nullam dui risus, varius nec sem pellentesque, suscipit consequat mauris. Vivamus volutpat, mi in molestie blandit, ligula
          odio efficitur libero, ac porta leo tellus eu felis. Mauris auctor orci sagittis libero semper tristique. Praesent hendrerit purus ex, eget fermentum nulla maximus nec. Fusce nisi metus, scelerisque et mi vitae, posuere condimentum odio. Aenean
          maximus erat non commodo aliquam. Aliquam ac tincidunt metus. Integer tincidunt id sapien lobortis imperdiet. Maecenas enim sem, vehicula sit amet feugiat sit amet, ornare vitae ex. Nam vulputate volutpat quam, a dapibus justo cursus vel. Donec
          ac gravida nulla. In ultrices erat et dictum tristique.</p>


        <div class="postinfo"> <a href="https://themesforyou.tumblr.com/post/162912904188/text-example">5:07 pm</a>       </div>


        <div class="tags">
          <a href="https://themesforyou.tumblr.com/tagged/text-post">#text post</a>  <a href="https://themesforyou.tumblr.com/tagged/example-post">#example post</a>  </div>


        <div class="postnote">

        </div>
      </div>


    </div>
    <!-- end entries-->

  </div>
  <!--end tab 1-->

  <div class="tab contact">

    <iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/ask_form/themesforyou.tumblr.com"></iframe>
  </div>

  <div class="tab submit">
    <iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/submit_form/themesforyou.tumblr.com"></iframe>
  </div>

  <div class="tab links">
    <div class="link">
      <div class="tilink">Title</div>
      <a href="/tagged/">Link 1</a>
      <a href="/tagged/">Link 2</a>
      <a href="/tagged/">Link 3</a>
      <a href="/tagged/">Link 4</a>
    </div>
    <div class="link">
      <div class="tilink">Title</div>
      <a href="/tagged/">Link 1</a>
      <a href="/tagged/">Link 2</a>
      <a href="/tagged/">Link 3</a>
      <a href="/tagged/">Link 4</a>
    </div>
    <div class="link">
      <div class="tilink">Title</div>
      <a href="/tagged/">Link 1</a>
      <a href="/tagged/">Link 2</a>
      <a href="/tagged/">Link 3</a>
      <a href="/tagged/">Link 4</a>
    </div>
  </div>

  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

通过其他评论，您可以尝试使用show的{​​{1}}和hide扩展程序。导入该库将允许您的原始代码按预期运行。

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

如果您在jQueryUI中查看jqueryui的API文档，您将看到以下引用;

  

这个插件扩展了jQuery的内置.show（）方法。如果未加载jQuery UI，则调用.show（）方法可能不会直接失败，因为该方法仍然存在。但是，预期的行为不会发生。

答案 1 :(得分：0)

jQuery Object {id: 1, unit: "Item 1", active: true, building: "2"} active: true building: "2" id: 1 unit:"Item 1" __proto__: Object 和hide不接受您正在传递的参数，默认动画正在发生。考虑将show和fadeOut用于您的目的。

https://api.jquery.com/hide/

https://api.jquery.com/fadeIn/ 

fadeIn
(function($) {
  $(document).ready(function() {
    $("a[title]").style_my_tooltips({
      tip_follows_cursor: true,

      tip_delay_time: 50,

      tip_fade_speed: 600,

      attribute: "title"
    });
  });
})(jQuery);

// Tab function
$(".titab.home").click(function() {
  $(".tab").fadeOut();
  $(".tab.home").fadeIn();
});
$(".titab.contact").click(function() {
  $(".tab").fadeOut();
  $(".tab.contact").fadeIn();
});
$(".titab.submit").click(function() {
  $(".tab").fadeOut();
  $(".tab.submit").fadeIn();
});
$(".titab.links").click(function() {
  $(".tab").fadeOut();
  $(".tab.links").fadeIn();
});
/*edit scrollbar*/

::-webkit-scrollbar-thumb {
    height:auto;
    background-color:#6b6d6d;
}
 
::-webkit-scrollbar {
    height:4px;
    width:3px;
    padding-right:2px;
    background-color:white;
}


#s-m-t-tooltip {
    max-width:300px;
    padding:5px 5px 5px 6px;
    margin:20px 0px 0px 20px;
    background-color:#6b6d6d;
    font-family:arial;
    font-size:9px;
    letter-spacing:2px;
    text-transform:lowercase;
    font-weight:bold;
    color:#fff;
    z-index:99999999;
}

 
body {
    background:#eee;
    margin:0px;
    color:#000000;
    font-family:arial;
    font-size:10px;
    line-height:100%;
}
   
/*edit links*/

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:#000000;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}
 
/*edit link hover*/

a:hover {
    color:#ddd;
    outline:none;
    -moz-outline-style:none;
    text-decoration:none;
}
 
img {
    border:none;
}
 
blockquote {
    padding-left:5px;
    border-left:2px solid #000000;
 
}
 
blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}
 
h1 {
    font-size:8px;
    text-align:left;
    font-family:arial;
    letter-spacing:1px;
    color:#000000;
}
 
h2 {
    font-size:8px;
    font-family:arial;
    text-align:left;
    letter-spacing:1px;
    color:#000000;
}


#topbar {
  display: inline-block;
  top: 0;
  left:0;
  width:100%;
  height: 80px;
  position:fixed;
  background: black;
}


#title {
  color:#fff;
  font-family: 'Unica One';
  font-size:18px;
  font-weight:bold;
  line-height: 80px;
  padding-left: 10px;
} 

.tabs {
  margin: 0 auto;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-194.5px;
  width:389px;
  height:100%;
}
.titab{
  cursor: pointer;
  background:white;
  width:80px;
  height:80px;
  font-size: 17px;
  text-align:center;
  line-height:80px;
  display: inline-block;
  margin-left: 20px;
}
.titab:first-of-type {
  margin-left:0;
}
.tab {
  display:none;
}
.tab iframe{
  margin-top:100px;
  width:400px;
}
.link {
  width:100px;
  margin:auto;
  margin-top: 100px;
}
.tilink{
  background:#fff;
  padding:10px;
  font-size:15px;
  border:1px solid #888;
  border-radius:5px 5px 0 0;
}
.link a{
  display:block;
  background:#fff;
  padding:5px;
  border:1px solid #aaa;
  border-top:none;
}
 
 
.entries {
    padding:20px;
    width:500px;
    margin:auto;
}
 
.post {
    width:500px;
    padding-bottom:40px;
}
 
 
/* POST INFO */ 

.postinfo {
    margin-top:20px;
    margin-bottom:1px;
    margin-left:-12px;
    padding-bottom:4px;
    width:500px;
    text-align:left;
    font-family:arial;
    text-transform:lowercase;
    font-size:10px;
   
    }
 
.postinfo a {
    color:#000000;
    }
   
.postinfo a:hover {
    color:#ddd;
    }
   
/*tags*/ 

.tags {
    width:500px;
    margin-top:4px;
    margin-left:-3px;
    padding:2px;
    font-family:arial;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
     
    }
   
.tags a {
    color:#000000;
    }
   
.tags a:hover {
    color:#ddd;
    }
   
.postnote {
    width:500px;
    margin-top:40px;
    font-family:arial;
    text-transform:lowercase;
    font-style:normal;
    letter-spacing:0px;
    font-size:10px;
    text-align:left;
  }
   
/*asks*/  

#question {
    font-size:11px;
    font-style:none;
    font-family:arial;
    letter-spacing:0px;
    text-align:left;
    padding-top: 7px;
    padding-bottom: 7px;    
    padding-left:9px;
    background:#fff;
    color:#000 ;
   
}
 
#question a{
    color:#000;
   
}
 

 
/*audio player container*/ 

.playercontainer {
    text-align:left;
    padding:10px;
    padding-left:0px;
    background-color:#fff;
    width:480px;
}

/*artist, song, etc.*/ 

.musicinfo {
    padding-top:7px;
    padding-left:50px;
    color:#000;
    text-align:justify;
}

相关问题
最新问题