h2ospace

jQueryã?§ã?¡ã??ã?£ã?¨ã?ªã??ã??ã?ªã??ã??ã??ã??ã??ã??ã??ã?ªã??ã??ã??

2010-01-31 21:00:54

æ??è¿?ã?®Webã??ã?¤ã??ã?§ã?¯ã??ã?ªã??ã?¯ã??ã??è¦?ç´?ã??ã??ã?¦ã??ã??ã??ã??ã??ã??é??ã??ã??ã??ã??ã??ã??ã??ã??ã??ã??ã?ªã??ã??ã??æ??ã??ã??ã??ã??ã??æ??å?ºã??æ??ã??ã??ã??ã??

ç??å??ã??ã?£ã??ã??ã??Flashã?§ä??ã??ã??ã??ã??ã?¤ã??ã?ªã??ã??ã??ã?ªã??ã??ã??ã??ã??ã?ªã??ã?¨ã??å?ºæ??ã??ã?®ã?§ã??ã??ã??ã??ã??ã??ã??ã?ªã??ã?¯ã?®å?´å??ã?¯ã??a:hoverã??è¦?ç´?ã?§å¤?å°?è??ã?ªã?©ã??å¤?æ?´ã??ã??ç¨?度ã??

ã??ã??ã??ã??jQueryã?¯ä?¿ã??ã?°é??常ã??ç°¡å??ã??ã?¡ã??ã?£ã?¨ã??ã??ã??ã??æ??å?ºã??ã??ã??ã??ã?¨ã??å?ºæ??ã??ã??ã??

ã??ã??ã?¯ã??ã?¡ã??ã?®ã??ã?¢ã??ã??覧ã??ã??ã??ã??ã??

ã??ã??ã??å®?ç??ã??ã??ã??ã??ã?®ã??ã??ã??ã??ã??ã?¡ã??ã??

<script type="text/javascript">
    jQuery('a').hover(function() {
        jQuery(this).stop().animate({
            paddingLeft: '10px'
        }, 100)
    }, function() {
        jQuery(this).stop().animate({
            paddingLeft: '0'
        }, 100)
    })
</script>

hoverã?¨ã??ã??ã?¤ã??ã??ã??ã?¯ã??ã??ã?®å??ã?®é??ã??è¦?ç´?ã??ã??ã?¦ã??ã??é??ã?ªã?£ã??æ??ã?®ã?¤ã??ã??ã??ã??ä¸?ã?¤ç?®ã?®ã??ã?©ã?¡ã??ã?¿ã??ã??ã??ã?¦ã??ã??é??ã?ªã?£ã??æ??ã?®å?¦ç??ã??äº?ã?¤ç?®ã?®ã??ã?©ã?¡ã??ã?¿ã??é?¢ã??ã??æ??ã?®å?¦ç??ã??æ?¸ã??ã??ã??ã??

ã??ã??ã?§ã?®å?¦ç??ã?¯ã??animateã??ã?¨ã??ã??ã?¡ã??ã??ã??ã??ä?¿ã?£ã?¦ã??CSSã??å?¶å?¡ã??ã??ã??ã??

ã??padding-leftã??ã?? 10pxã??è¨?å®?ã??ã??ã??ã??100ã??ã?ªç§?ã??ã??ã??ã?¦å¤?å??ã??ã??ã??ã??ã??ã??å??ã??ã??ã?£ã?¨å??ã??ã??ã??ã??ã??è¦?ã??ã??ã??ã??

é??ã??ã??ã??ã?¦ã??ã??é?¢ã??ã??æ??ã?¯å??ã??ã??100ã??ã?ªç§?ã??ã??ã??ã?¦ã??padding-leftã??ã??0ã??æ??ã??ã?®ã?§ã??å??ã??ã??ã?£ã?¨æ??ã??ã??ã??ã?ªæ??å?ºã??ã?ªã??ã??ã??ã??

ã??ã??ã??ã?¡ã??ã??ã??ã?®é??ã??ã??stop()ã??ã?¨ã??ã??è¨?è¿°ã??ã??ã??ã??ã??ã??ã??ã??ã?¯ã??animateã??ä¸?æ??ã??ã??ã??ã??ã?®ã??ã?®ã??ã?ªã??ã?ªã??ã??ã??ã?®è¨?è¿°ã??ã?ªã??å?´å??ã??ã??ã?¦ã??ã??é??é??ã?§ã?ªã??ã?¯ã?®ä¸?ã??è¡?ã?£ã??ã??æ??ã??ã??ã??ã??ã?¨ã??ã?¤ã??ã??ã??ã??ä??度ã??ç?ºç??ã??ã?¦ã??ã??ã?£ã?¦ã??ã??ã?¿ã??ã?¿ã?¨æ??å??ã??å??ã??ç¶?ã??ã?¦ã??ã??ã??ã??ã??ã??

ã??ã??ã??é??ã??ã??ã??ã??ã??æ?°ã??ã??animateã??ç?ºç??ã??ã??å??ã??ã??ã??ã??ã?§ã?®ã?¤ã??ã??ã??ã??ä¸?æ??ï??ã??ã??ã??ã??空ã??ã??ã??ã?¨è¨?ã??ã??ã??ï??ã??ã?¦ã??ã??ã?®ã?§ã??ã??

ã??ã??ã??ã??è??æ?¯ã?®å?¦ç??ã?ªã?©ã??次ã?®ã??ã??ã??CSSã?§å??ã??ã??ã??ã??

a:hover {
    background-color: #0070CB;
    color: #FFF;
    text-decoration: none;
}

ã??ã??ã?§ã??ã?¡ã??ã?£ã?¨ã?ªã??ã??ã?ªã??ã??ã??ã?ªã??ã??ã??ã??å®?ç??ã?§ã??ã??ã?¨ã??ã??ã??ã??ã?§ã??ã??

animateã?¡ã??ã??ã??å??ã??ã?¯CSSã?§æ??å®?ã?§ã??ã??ã??ã?®ã?¯ã??ã??ã??æ??å®?ã?§ã??ã??ã??ã??è??æ?¯è??ã??æ??å??è??ã?ªã?©ã??å¤?ã??ã??ã?°ã??ã??ã?§ã??ã??ã?¤ã??ã?®ã??ã??ã?ªå??æ??ã??æ??å?ºã??ã??ã??ã?¨ã??å?ºæ??ã??ã??ã??

ã??ã??ã??ã??ã??background-colorã??ã??ã??backgroundColorã??ã?¨ã?ªã??ã?ªã?©ã??å°?ã??ã??ã??è¨?è¿°ã?®æ??æ??ã??å¤?ã??ã??ã??ã??ã??ï??ã??ã?£ã?¡ã??ã?±ã??ã??ã?¨ã??ã??æ?¸ã??æ??ã??ã?ªã??ã??ã??ï??

è©?ã??ã??ã?¯ã??jQueryã?®è§£èª¬ã??ã?¤ã??ã?ªã?©ã??ã??覧ã??ã??ã??ã??ã??ã??ã??

ã??ã??ã??animateã?§ã??ã??ã??ã??ã?ªã??ã?¿ã?¤ã??ã??è¨?å®?ã??ã??ã??ã?¨ã??ã??ã?¨ã??ä¸?å®?å®?ã??ã?ªã?£ã?¦ã??ã??ã??ã??ã??ã??ã?©ã??ã??ã?¦ã??å??ã??ã?¨ã??ã?¦è¦?ã??ã??ã??ã??ã?®ä??å¤?ã?¯ã??CSSã?§è¨?å®?ã??ã??ã?®ã??ã??ã?¤ã??ã??ã??ä¸?æ??ã??ã??ã?©ã??ã??ã??å??ã?£ã?¦ã??ç´?æ??ã?ªå??ã??ã??æ??å?ºã??ã??ã??ã??ã??ã??

[PR] Ajaxé??ç?ºã??ã??ã??ã?? | ã?¡ã??ã??ã?¨Webã?ªã??ã??ã??ã??ã??ã?¸å?¶ä??ä??ç¤?ï??æ?±äº¬ï??ã??ã?¨ã?¤ã??ã??ã??ã?ªã??ã??ã??ã??ã??ã??[H2O Space.]

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]