JQuery скользит по 2 divs

У меня есть 3 divs, которые делают слайд-шоу. То, что я хочу, так это возможность щелкнуть мышью на div и сделать цикл дважды. т.е. при нажатии на div # 1 он прокручивается через div # 2, продолжается и останавливается в div # 3 .... или нажимает на div # 2 и плавно прокручивается дважды и останавливается на div # 1JQuery скользит по 2 divs

Право теперь я могу получить его только для прокрутки до следующего div.

Вот 2 jsfiddle примеры, с обоими, хотя я не могу заставить его прокручивать 2 дивы OnClick, только 1.

http://jsfiddle.net/jtbowden/ykbgT/2/ http://jsfiddle.net/jtbowden/ykbgT/

Вот мой HTML:

<div id="box1" class="box">Div #1</div> 
<div id="box2" class="box">Div #2</div> 
<div id="box3" class="box">Div #3</div> 

</div>

и CSS

body { 
padding: 0px;  
} 

#container { 
position: absolute; 
margin: 0px; 
padding: 0px; 
width: 100%; 
height: 100%; 
overflow: hidden; 
} 

.box { 
position: absolute; 
width: 50%; 
height: 300px; 
line-height: 300px; 
font-size: 50px; 
text-align: center; 
border: 2px solid black; 
left: 50%; 
top: 100px; 
margin-left: -25%; 
} 

#box1 { 
background-color: green; 
left: -150%; 
} 

#box2 { 
background-color: yellow; 
} 

#box3 { 
background-color: red; 
left: 150%; 
}

и JS:

$('.box').click(function() { 
$('.box').each(function() { 
    if ($(this).offset().left < 0) { 
     $(this).css("left", "150%"); 
    } else if ($(this).offset().left > $('#container').width()) { 
     $(this).animate({ 
      left: '50%', 
     }, 500); 
    } else { 
     $(this).animate({ 
      left: '-150%', 
     }, 500); 
    } 
}); 
});

источник

2014-11-16 j_rc

Имейте время, чтобы сделать это с помощью css :) –

http://jsfiddle.net/ykbgT/8195/

var anim = false; //prevent animaton before end, on more clicks 
var numCycle = 2; //number of cycle, can be changed at will 

$('.box').click(function() { 
    if (anim == false) animateD($(this), 1) 
}); 

function animateD($d, count) { 
    anim = true; 

    $d.animate({ 
     left: '-50%' 
    }, 500, function() { 
     $(this).css('left', '150%'); 
     $(this).appendTo('#container'); 
    }); 

    $d2 = $d.next(); 
    $d2.animate({ 
     left: '50%' 
    }, 500, function() { 
     if (count < numCycle) { 
      count++; 
      animateD($d2, count) 
     } else { 
      count = 0; 
      anim = false; 
     } 
    }); 
}

источник

2014-11-16 19:10:12 dm4web

:) Хорошо, если вы так говорите. – dm4web

@MrUpsidown двойной клик по анимации div и смотреть без var anim в ответ youre – dm4web

+1. Я обновил свой ответ. – MrUpsidown

Wrap анимация в функции. Вызовите его снова на следующем элементе только при событии клика.

var anim = false; 

$('.box').on('click', function() { 

    anim === false && slide($(this), true); 
}); 

function slide(el, next) { 

    anim = true; 

    el.animate({ 
     left: '-50%' 
    }, 500, function() { 

     el.css('left', '150%'); 
     el.appendTo('#container');   
    }); 

    el.next().animate({ 
     left: '50%' 
    }, 500, function() { 

     next === true ? slide($(this)) : anim = false; 
    }); 
}

Как отметил @ dm4web было бы хорошей идеей, чтобы предотвратить событие щелчка, чтобы вызвать скольжение при анимации происходит.

JSFiddle demo

источник

2014-11-16 18:57:59 MrUpsidown

-1

Вы должны инициализировать начальное состояние с атрибутом стиля, потому что у вас есть другая специфика HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="container"> 

    <div id="box1" style="left: -150%" class="box">Div #1</div> 
    <div id="box2" style="left: 50%" class="box">Div #2</div> 
    <div id="box3" style="left: 250%"class="box">Div #3</div> 

</div> 

</body> 
</html>

В этом случае лучше лучше использовать массив для управления позицией js:

var arr = ['-150%', '50%', '250%'], 
    children = $('.box'), 
    i = children.length, 
    time = true, 
    transition = function() { 
    arr.unshift(arr.pop()); 
    while(i--) { 
    if(parseInt(children[i].style.left) < 0) { 
     children[i].style.left = arr[i]; 
    } else { 
     $(children[i]).animate({ 
     left: arr[i], 
     }, 500, function() { 
     if(!time){ 
      time = true; 
      transition(); 
     } 
     }); 
    } 
    } 
    i = children.length; 
}; 
$('.box').click(function() { 
    if(time) { 
    time = false; 
    transition(); 
    } 
});

источник

2014-11-16 21:01:56

JQuery скользит по 2 divs

ответ

Смежные вопросы