動畫在jquery中的問題

Question

我試圖把類的工作，但沒有在所有因爲我有一個屬性是不設置，我知道爲什麼檢查這個。

$(document).ready(initialize); 

function initialize() { 
    $(".imagePanel").hover(mouseOver,mouseOut); 
} 

function mouseOver() { 
    $(this).animate({ 
     border:"2px" 
     opacity: 0.25    
    }, 100); 
} 

function mouseOut() { 
    $(this).animate({ 
     border: "2px", 
     opacity: 0.25 
    }, 100); 
} 

是：第一，財產邊界它不設置和第二沒有任何關於去除不透明的功能鼠標移出理念的問題。邊框設置爲div元素。謝謝。

Answer 1

它似乎並不認爲你可以在animate設置邊框，但是你可以用css：

$(document).ready(initialize); 

function initialize() { 
    $(".imagePanel").hover(mouseOver,mouseOut); 
} 

function mouseOver() { 
    $(this).stop(true,true).animate({ 
     opacity: 0.25    
    }, 100, function() { 
     $(this).css('border','2px solid black'); 
    }); 
} 

function mouseOut() { 
    $(this).stop(true,true).css('border','0 none').animate({ 
     opacity: 1 
    }, 100); 
} 

See example →

Answer 2

$(document).ready(function(){ 

    $(".imagePanel").mouseover(function() { 
     $(this).animate({ 
      borderTopColor:"#FF00FF", 
      borderBottomColor:"#FF00FF", 
      borderLeftColor:"#FF00FF", 
      borderRightColor:"#FF00FF", 
      opacity: 0.25    
     }, 500); 
    }); 

    $(".imagePanel").mouseout(function() { 
     $(this).animate({ 
      borderTopColor:"#FFFFFF", 
       borderBottomColor:"#FFFFFF", 
      borderLeftColor:"#FFFFFF", 
       borderRightColor:"#FFFFFF", 
      opacity: 1 
     }, 500); 
    }); 

}); 

試試看。

http://jsfiddle.net/n2ugx/8/

Answer 3

我不知道你的問題是非常明顯的，但也有代碼中的問題。

mouseOut（）和mouseOver（）函數都是相同的。什麼都不會發生。

jQuery animate（）將元素從您指定的最終狀態開始。你的兩個功能都是一樣的，所以沒有任何變化。