애니메이션 이미지 속성 변경

Question

$(function() { 
    $(".flexslider img") 
     .mouseover(function() { 
      var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png"; 
      $(this).attr("src", src); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("-bw.png", ".png"); 
      $(this).attr("src", src); 
     }); 
    }); 

나는 이전 SRC + -bw 또는 접미사 마우스 오버를 어느 때 워드 프레스 테마의 대부분의 페이지에 나타나는 회전 목마, 나는 새로운 ATTR에있는 회전 목마에 모든 이미지를 변경할 필요가있다 . 그러나 트위닝하거나 애니메이션을 적용해야합니다. 위의 코드는 이미지를 변경하지만 움직이지 않습니다. 또한 많은 사람들은 호버에 드러날 이미지를 미리로드 할 것을 제안합니까?

Answer 1

애니메이션의 어떤 종류의 당신이 필요로 할 ? 페이딩?

$(function() { 
    $(".flexslider img") 
     .mouseover(function() { 
      var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png"; 
      $(this).fadeOut("fast").attr("src", src).fadeIn("fast"); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("-bw.png", ".png");     
      $(this).fadeOut("fast").attr("src", src).fadeIn("fast"); 
     }); 
    }); 

Answer 2

당신은 그것을 설명, 여기에 크로스 페이드를 할 필요가있을 것이다 :

http://jqueryfordesigners.com/image-cross-fade-transition/

당신이 뭔가를 할 수 있습니다 :

crossFade = function(element, to_src) { 
    element = $(element); //maybe this isn't even needed. 
    element.style = "display: block; position: absolute; top:0; left:0;"; //please replace this with four .css() calls ;) and double check the positioning 
    parentElement = $(element.parentNode); 
    newElement = $("<img/>", { 
     src: to_src, 
     style: "display: none; position: absolute; top:0; left:0;" 
    } 
    newElement.appendTo(parentElement); 
    //please check in your dom if both images are in the carrousels-list-node, as I might have errored ;) 
    newElement.fadeIn(5000, (function(el) { return function() { el.remove(); }; })(element)); 
};