나는 이미지가 거의 없으며 그중 하나를 누르면 다른 이미지가 페이드 아웃되기를 원합니다.
<body>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<img class="images" id="img" src="/images/user1.png" height="100" width="100">
<img class="images" id="img2" src="/images/user2.png" height="100" width="100">
<img class="images" id="img3" src="/images/user3.png" height="100" width="100"><br>
<script>
$(document).ready(function () {
$('#img').mouseover(function () {
$(this).css('cursor', 'pointer');
});
$('#img2').mouseover(function () {
$(this).css('cursor', 'pointer');
});
$('#img3').mouseover(function () {
$(this).css('cursor', 'pointer');
});
});
$(document).on('click', '.images', function (event) {
$(event.target.id).fadeIn(1000);
$(".images:not(#" + event.target.id + ")").fadeTo("fast", 0.5);
});
</script>
</body>
문제는 처음과 다른 이미지를 누르면 모든 이미지가 페이드 아웃 상태로 유지된다는 것입니다. 눌러 진 이미지에 추가 한 페이드 인이 작동하지 않는 것 같습니다.
클릭하고있는 것을 만들어야합니다. fadeTo("fast",1)
$(document).on('click', '.images', function (event) {
$(".images:not(#" + event.target.id + ")").fadeTo("fast", 0.5);
$(this).fadeTo("fast", 1); // This is the new line
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다