Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Try jQuery ( 5 ):Styling

5.1 addClass

jQuery Object Methods

.toggleClass()
.addClass()
.removeClass()
.show()
.hide()

移到的地方就會顯示圖片

$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).css({"background-color": "#252b30", "font-weight": "bold"});
    $(this).find(".photos").show();
  });
});

5.2 animation

上移

$(document).ready(function() {
   $('#vacations').on('click', '.vacation', function() {
     $(this).toggleClass('highlighted'); if($(this).hasClass('highlighted')) {
       $(this).animate({'top': '-10px'});
     } else {
       $(this).animate({'top': '0px'});
     }  
    }); 
});

改變移動速度

第一種方法:直接使用jquery設定

$(document).ready(function() {
   $('#vacations').on('click', '.vacation', function() {
     $(this).toggleClass('highlighted');
     if($(this).hasClass('highlighted')) {
       $(this).animate({'top': '-10px'}, 'fast');
     } else {
       $(this).animate({'top': '0px'}, 'fast');
     }
}); });

animate(), slideToggle() and fadeToggle() can also be given a specific speed as a String or in milliseconds

第二種方法:透過css設定

$(document).ready(function() {
   $('#vacations').on('click', '.vacation', function() {
     $(this).toggleClass('highlighted');
   });
});
.vacation {
    -moz-transition: top 0.2s;
    -o-transition: top 0.2s;
    -webkit-transition: top 0.2s;
   transition: top 0.2s;
 }
 .highlighted {
   top: -10px;
}

透過css設定必須注意每個瀏覽器的css寫法都不相同,而且有些瀏覽器並不支援transition。