Как это делается? [Архив форума]

Просмотр полной версии : Как это делается?

mishanay

08.03.2013, 14:10

Подскажите пожалуйста каким скриптом и какой библиотекой реализуется данный эфект?

http://pizza2dom.ru/pizza

При наведении на карточку товара рисуются линии бордера.

Deff

09.03.2013, 00:18

mishanay,
В данном случае, div, установленный с positon:absolute за картинкой и увеличивающийся в размере при наведении,
div(ов) два на одну карточку, - установленны по диагонали,
окрас бордеров у этих div только c двух прилегающих сторон
Оба div в общем обрамлении - третьим

ksa

09.03.2013, 11:31

Что-то не пойму почему происходит смена событий при движении мыши "по" диву box... :blink:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
.box {
position: relative;
background-color: #ffffff;
}
.border {
position: absolute;
width: 0;
height: 0;
}
.up {
top: 0;
right: 0;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.dn {
left: 0;
bottom: 0;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('.box').mouseover(function (){
var o=$('.border');
o.css({
borderColor: 'green',
});
o.animate({
width: '50%',
height: '50%'
});
});
$('.box').mouseout(function (){
var o=$('.border');
o.animate({
width: 0,
height: 0
});
o.css({
borderColor: '#ffffff',
});
});
});
</script>
</head>
<body>
<div class='box'>
<div class='border up'></div>
<div class='border dn'></div>
<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>

mishanay

09.03.2013, 20:22

Я могу только предположить что анимация зацикливается и ее надо остановить после первого воспроизведения

ksa

10.03.2013, 11:01

анимация зацикливается
Нет.
Почему-то события mouseout и mouseover mouseout срабатывают при движении по ДИВу...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
.box {
position: relative;
background-color: #ffffff;
}
.border {
position: absolute;
width: 0;
height: 0;
}
.up {
top: 0;
right: 0;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.dn {
left: 0;
bottom: 0;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('.box').mouseover(function (){
alert(1);
var o=$('.border');
o.css({
borderColor: 'green',
});
o.animate({
width: '50%',
height: '50%'
});
});
$('.box').mouseout(function (){
alert(2);
var o=$('.border');
o.animate({
width: 0,
height: 0
});
o.css({
borderColor: '#ffffff',
});
});
});
</script>
</head>
<body>
<div class='box'>
<div class='border up'></div>
<div class='border dn'></div>
<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>

mishanay

10.03.2013, 13:43

Да это действительно странно! Где уважаемые знатоки? Помогите разобраться!

dmitriymar

10.03.2013, 16:55

Да это действительно странно! Где уважаемые знатоки? Помогите разобраться!
что здесь странного? это стандартное поведение out и over при преходе на дочерний срабатывает событие out родителя и т.д
используйте события leave и enter http://jquery-docs.ru/events/mouseleave/

Deff

10.03.2013, 18:36

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
.box {
position: relative;
background-color: #ffffff;
}
.border {
position: absolute;
width: 0;
height: 0;
}
.up {
top: 0;
right: 0;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
.dn {
left: 0;
bottom: 0;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('.box').mouseover(function (){
var o=$('.border');
o.css({
borderColor: 'green',
});
o.stop().animate({
width: '50%',
height: '50%'
},600);
});
$('.box').mouseout(function (){
var o=$('.border');
o.stop().animate({
width: 0,
height: 0
},400, "linear", function (){
o.css({
borderColor: '#fff',
});
});

});
});
</script>
</head>
<body>
<div class='box'>
<div class='border up'></div>
<div class='border dn'></div>
<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>

ksa

10.03.2013, 18:54

это стандартное поведение out и over при преходе на дочерний срабатывает событие out родителя и т.д
Но :hover таким не страдает...

Причем "моргание" происходит даже если не двигать по картинке, а например в правой стороне ДИВа...

Deff

10.03.2013, 18:59

Причем "моргание" происходит даже если не двигать по картинке, а например в правой стороне ДИВа...

ksa,
Во фрейме, события over для javascrip прерываются еще и таймированием, к примеру с родительской, нун не в топике тестить

ksa

10.03.2013, 19:29

Бум знать...

Deff

10.03.2013, 20:43

Бум знать...
Да в этом примере, все это не сильно важно, основное: - прекращать анимацию, при установке новой на том же элементе
(.stop() http://jquery-docs.ru/Effects/stop/#clearQueuegotoEnd )
- тогда все эти дергания - пофег