Форум

dianitka · #1 (**permalink**) 06.11.2010, 20:39

такой вот вопрос - нужно чтобы при наведении курсора на элемент Х элемент У медленно появлялся как бы из под элемента Х, а при отведении элемент У должен медленно растворяться. При использовании этого кода

$(".x").mouseover(function(){
$(".y").slideDown("slow");

});

$(".x").mouseout(function(){
$('.y').fadeOut('5000');
});

элемент У появляется откуда-то сбоку и по несколько раз, даже если курсор не на Х. подскажите, как с этим бороться.

Gvozd · #2 (**permalink**) 06.11.2010, 20:42

внимательнее выбирайте раздел при создании тем.
перенес

monolithed · #3 (**permalink**) 06.11.2010, 21:20

Как вариант:

<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>

dianitka · #4 (**permalink**) 06.11.2010, 21:42

спасибо за ответ, но я имела в виду не совсем этой результат.
элемент Х должен оставаться на месте, тех же размеров, появляется и растворяется только элемент У.

exec · #5 (**permalink**) 07.11.2010, 11:11

<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>

monolithed · #6 (**permalink**) 07.11.2010, 14:18

А вот оно что

Тогда мне кажется проще так:

<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>

exec · #7 (**permalink**) 07.11.2010, 16:39

monolithed, если быстро кликнуть на блок больше одного раза, то будет не совсем приятный эффект.

dianitka · #8 (**permalink**) 08.11.2010, 00:49

спасибо за ответы. мне больше всего подходит вариант
$(".x").hover(

function() {$(".y").slideDown(5000)}
,
function() {$('.y').fadeOut(5000) }
);

(ведь нужно чтобы появление и растворение происходило не при клике а при наведении на элемент Х) но при таком коде У появляется слева а мне нужно снизу, как у вас.

попробовала

$(".x").hover(

function() {$(".y").show().animate({top: "20px"}, 300)}
,
function() {$('.y').fadeOut(5000) }
);
однако при этом У появляется слишком быстро

Форум

Справочник

Discord чат

Курсы javascript