1. ホーム
  2. 質問と答え
  3. 自動jqueryエフェクト（望ましくない）

自動jqueryエフェクト（望ましくない）

2017-07-13 2 views
3

私はシンプルな表示/非表示メニューを作成しました：一つのボタンをクリックすると、現在のタブは隠れ、もう一つは表示されます。 'fade'効果を設定しましたが、スライドやその他のエフェクトが発生しています。例はcodepenです。私はフェード以外のものを適用したいと思いますが、私はこれを置く問題を解決するために今のところです。なぜそれがこれをやっているのかわかりません。誰も助けることができますか？ :)ありがとう！自動jqueryエフェクト（望ましくない）

// 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"); 
 
});
/*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; 
 
}
<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>

出典

2017-07-13 Maëlle Jumel

+2

リモートサイトだけでなく、ここにコードを掲載してください。 [Stack Snippets]（https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）を使用して実行可能にすることができます。 – Barmar

+0

この問題は、 'fade'のためにタブの' height'と 'width'がアニメーション化されていることが原因です。代わりに達成しようとしている効果は何ですか？ –

+1

私はあなたのペンを（[edit]（https://stackoverflow.com/posts/45088602/edit）ページのスニペットに入れて、どのように表示するかを見てきました。私はCodePenの* tidy *ツールを使用して、ここに貼り付ける前にソースを正しくインデントしました。これにより、読みやすくなりました。また、jQuery 1.7は*非常に古いですので、3にアップグレードすることを検討してください。 – msanford

答えて

0

jQueryのhideとshowは、デフォルトのアニメーションが発生している、あなたが渡すされたパラメータを取ることはありません。あなたの目的にはfadeOutとfadeInを使用することを検討してください。追加のコメントから

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

https://api.jquery.com/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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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"> 
 
    <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> 
 

 

 
    <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>

出典

2017-07-13 19:49:38 Steve

1

それはあなたがjqueryuiからshowとhideに拡張子を使用しようとしている明確です。そのライブラリをインポートすると、元のコードが期待どおりに機能するようになります。

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

あなたはjQueryUIでshowのAPIドキュメントを確認した場合は、以下の引用文が表示されます。

このプラグインは、jQueryに組み込まれた.show（）メソッドを拡張しています。 jQuery UIがロードされていない場合、メソッドがまだ存在するため、.show（）メソッドの呼び出しは直接失敗しないことがあります。ただし、予想される動作は発生しません。

出典

2017-07-14 15:53:26 Steve

関連する問題

 関連する問題