jQuery 드롭 다운 -CSS 문제

StackOverflow https://stackoverflow.com/questions/602553

  •  03-07-2019
  •  | 
  •  

문제

이봐, 당신이 가려면 : http://catonthecouchproductions.com/fish/ 그리고 드롭 다운 아래의 이미지는 숨겨져 있다고 가정 한 다음 호버에 나타납니다. 지금까지 이것을 가지고 있습니다.

$(document).ready(function() {
    $('.btn-fishing-trip').hover(function() {
        $('.fishing-trip').slideDown("slow");
    }, function() {
        $('.fishing-trip').slideUp("slow");
    });
    $('.btn-combo').hover(function() {
        $('.combo').slideDown("slow");
    }, function() {
        $('.combo').slideUp("slow");
    });
});

그러나 그것은 이상한 행동입니다. 내가 할 수있는 일에 대한 제안이 있습니까? 나는 한때 다른 슬라이드가 자리를 차지하는 것보다 올라간다고 생각합니다. 슬라이드 타운이 아닌 Animate ()를 사용해야합니까?

도움이 되었습니까?

해결책

대신에 .slideDown() 그리고 .slideUp() 각각 사용하십시오 :

$(yourElementHere).stop().animate({ top: "20px", opacity: "1" }, 500, "swing");

그리고 

$(yourElementHere).stop().animate({ top: "-180px", opacity: "0" }, 500, "swing");

다른 팁

슬라이드 타운, 슬라이드 업을 사용할 수 있습니다. 정말 유용합니다. 문제는 .hover에 문제가 있다고 생각합니다. .MouseOver를 사용하여 마우스 아웃을 콜백으로 사용하십시오. 이제 슬라이더를 멈추는 이벤트는 반복해서 반복해서 반복되기 때문에 제대로 호출되지 않은 것 같습니다. 또한, 나는 악의적이라고 생각되는 일을 얻지 못합니다. 나는 당신이 몇 가지 요소 나 무언가를 혼합했다고 생각합니다. 숨겨져 있거나 표시되어야 할 항목에 클래스를 추가하고 .hasclass ()를 사용하려고 시도 할 수 있습니다. 특정 클래스가 있는지 여부를 확인하려면 위 또는 아래로 밀어야하는지 확인할 수 있습니다.

우선, 개별 항목에 대한 수업이 없습니다. ID를 사용하여 개별적으로 스타일을 지정할 수 있으며 동일한 클래스를 가진 모든 객체에 대해 하나의 호버 기능을 가질 수 있습니다 (복사 및 4 번은 붙여 넣기).

둘째, 다음은 다음과 같은 기본 구조입니다.

<div class="button" id="btn1">
  <div class="info"><img src="info1"></img></div>
</div>
<div class="button" id="btn2">
  <div class="info"><img src="info2"></img></div>
</div>
...

".info"요소를 버튼의 어린이로 가질 필요는 없지만 고유 한 ID 없이는 액세스 할 수 있어야합니다 (즉, 다음 요소 또는 자식).

그것은 JavaScript를 쉽게 만듭니다.

$(".button").hover(function() {
  $(this).find(".info").slideDown();
}, function() {
  $(this).find(".info").slideUp();
});

또는 더 잘 작동하도록하는 것처럼 수정할 수 있습니다.

$(".button").hover(function() {
  $(".info").not(".info", $(this)).slideUp(); // Not sure if valid JQ
  $(this).find(".info").slideDown();
});

이 시도: 

$(document).ready(function() {
    $('.btn-fishing-trip').hover(function() {
        $('.fishing-trip').slideDown("slow");
        $('.combo').slideUp("slow");
    });    
    $('.btn-combo').hover(function() {
        $('.combo').slideDown("slow");
        $('.fishing-trip').slideUp("slow");
    });
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top