вопрос по jQuery
Вложений: 1
такой вот вопрос - нужно чтобы при наведении курсора на элемент Х элемент У медленно появлялся как бы из под элемента Х, а при отведении элемент У должен медленно растворяться. При использовании этого кода
$(".x").mouseover(function(){ $(".y").slideDown("slow"); }); $(".x").mouseout(function(){ $('.y').fadeOut('5000'); }); элемент У появляется откуда-то сбоку и по несколько раз, даже если курсор не на Х. подскажите, как с этим бороться. |
внимательнее выбирайте раздел при создании тем.
перенес |
Как вариант:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<div id="slide">
<div class="div1"></div>
<div class="div2"></div>
</div>
<style type="text/css">
#slide {overflow: hidden;width: 100px;height: 100px;}
#slide div {width: 100px;height: 100px;}
.div1 {background: red;}
.div2 {background: green;display: none;}
</style>
<script type="text/javascript">
$(function(){
$('#slide div').click(function(){
$(this).slideToggle().fadeTo('fast', 0.1).siblings('div').slideToggle().fadeTo('fast', 1);
});
});
</script>
|
спасибо за ответ, но я имела в виду не совсем этой результат.
элемент Х должен оставаться на месте, тех же размеров, появляется и растворяется только элемент У. |
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.3.min.js'>
</script>
</head>
<body>
<div style='z-index: 1; background: #555555; width: 100px; height: 50px; position: absolute; top: 50px' id='large'>
</div>
<div style='display: none; background: orange; width: 70px; height: 30px; position: absolute; left: 22px; top: 40px' id='small'>
</div>
<script type='text/javascript'>
$("#large").one("click", function () {
var callee = arguments.callee, t = $(this);
if (this.clicked = !this.clicked)
$("#small").show().animate({
top: "20px"
}, 300, function () {
t.one("click", callee);
});
else
$("#small").fadeOut("normal", function () {
t.one("click", callee);
$(this).css("top", "50px");
});
});
</script>
</body>
</html>
|
А вот оно что:)
Тогда мне кажется проще так:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.3.min.js'>
</script>
</head>
<body>
<div id='block'>
<div id='large'></div>
<div id='small'></div>
</div>
<style type="text/css">
#block, #large, #small {position: absolute;}
#block {overflow: hidden; width: 100px; height: 100px;}
#large {background: #555555; top: 50px; width: 100px; height: 50px; z-index: 1;}
#small {background: orange; display: none; top: 80px; left: 15px; width: 70px; height: 30px;}
</style>
<script type='text/javascript'>
$("#large").toggle(
function(){
$("#small").show().animate({
opacity: 1,
top: "-=60px"
}, 500);
},
function(){
$("#small").animate({
opacity: -5,
top: "+=60px"
}, 500);
}
);
</script>
</body>
</html>
|
monolithed, если быстро кликнуть на блок больше одного раза, то будет не совсем приятный эффект.
|
спасибо за ответы. мне больше всего подходит вариант
$(".x").hover( function() {$(".y").slideDown(5000)} , function() {$('.y').fadeOut(5000) } ); (ведь нужно чтобы появление и растворение происходило не при клике а при наведении на элемент Х) но при таком коде У появляется слева а мне нужно снизу, как у вас. попробовала $(".x").hover( function() {$(".y").show().animate({top: "20px"}, 300)} , function() {$('.y').fadeOut(5000) } ); однако при этом У появляется слишком быстро |
| Часовой пояс GMT +3, время: 11:37. |