jquery animate/mouseover/mouseout가 작동하지 않습니다.

Question

'스프링'클래스로 요소 위로 마우스를 가져 가면 다른 색상으로 전환하고 싶습니다. jQuery를 사용하여이 작업을 수행하고 있지만 작동하지 않는 것 같습니다. 누군가 나를 위해 이것에 대해 밝힐 수 있을까요? 여기에 지금까지 무엇을위한 바이올린 ... 미리 감사드립니다

jsfiddle

입니다!

$('.spring').mouseover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }).mouseout(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
}); 

이것은 jQuery에 대해 지금까지 사용한 코드입니다. 이를 위해 hover를 사용하는

Answer 1

시도 :

$('.spring').hover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }); 
}, function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
}); 

Answer 2

$(document).ready(function() { 
    $('.spring').hover(function() { 
     $('.spring').animate($(this).css({ 
      'background': '#CCCCCC' 
     })); 
    }, function() { 
     $('.spring').animate($(this).css({ 
      'background': '#000000' 
     })); 
    }); 
}); 

http://jsfiddle.net/3f4RQ/5/

Answer 3

내가 수정 한 사용자의 바이올린

http://jsfiddle.net/3f4RQ/3/

$(document).ready(function() { 

    $('.spring').hover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }, 

    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
}); 

mouseover 및 mouseout 이벤트가 여전히 필요한 경우 아래 스 니펫을 사용할 수 있습니다. $ (문서) .ready (함수() {

$('.spring').mouseover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }) 
.mouseout(
    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
}); 

또한 당신의 backgroundColor 속성을 애니메이션 JQuery와 UI가 필요합니다. 그것은 도움이 경우

이 답변으로 표시하십시오.

Answer 4

을 만약 내가 제대로 이해하고 누군가가 떠날 때까지 상자가 빨간색이되게 한 다음 마우스를 올려 놓으면 회색이되고 빨간색 대신 검정색이됩니다.

CSS는 가능한 한 많은 작업을 수행하는 경향이 있습니다. 더 쉬워 특히 그렇게 간단한 것을 위해 작업하십시오. 대부분의 경우 CSS 애니메이션이 jQuery 애니메이션 기능을 대체 할 수 있습니다. jQuery는 상자가 맴돌 았음을 나타내는 플래그를 설정하기 만하면 필요합니다.

jQuery를 : 나는 필요하지 않을 때 쉽게 끌 수 있도록, 마우스를 두었을위한 기능 "에"업데이트 사용

. 기본적으로이 클래스는 상자에 처음으로 놓인 클래스를 설정합니다.

$(document).ready(function() { 

    $('.spring').on('mouseover', function() { 
     $('.spring') 
     .addClass('touched') 
     .off('mouseover'); 
    }); 

}); 

CSS :

나는 애니메이션이 부드럽게하고 CSS 전환보다는의 jQuery 애니메이션과 함께 세밀하게 제어 할 수 있음을 찾을 수 있습니다. 마우스를 가져 가면 회색으로 변하고 클래스는 검은 색으로 표시되며 모든 것이 CSS에 있습니다.

는

.spring { 
    background: red; 
    width: 100px; 
    height: 30px; 
    transition: background 0.5s ease 
} 
.spring:hover, .spring.touched:hover { 
    background: #ccc; 
} 
.spring.touched { 
    background: #000; 
} 

이것은 jQuery를에 성가신 CSS 코드를 추가 할 필요없이, 당신에게 모양의 모든 측면을 쉽게 제어 할 수 있습니다.

See the Fiddle here

하나 잡았다-전에 당신이 그것을 사용, CSS 애니메이션 지원을 위해 테이블을 확인합니다 http://caniuse.com/css-animation. 나는 보통 전환을 필수 항목 이라기보다 "좋은"항목이라고 생각하기 때문에 IE9 이하에서 전환이 보이지 않을까 걱정하지 않습니다. 그들은 여전히 ​​색상 변경을 잘 받아서 실제로 잃어버린 기능이 없습니다. 자바 스크립트에있는 모든 쓰레기를 가지지 않는 이점은 가치가 있습니다.