Почему анимация не работает для первых нескольких «выборов» моей следующей кнопки? - PullRequest
Новая
       17

Почему анимация не работает для первых нескольких «выборов» моей следующей кнопки?

1 голос
/ 28 мая 2010

Я просто начну сразу и скажу, что я довольно новичок в JQuery, так что если вы видите некоторые вопиющие проблемы с моим кодом ... дайте мне знать, что я делаю неправильно!

В любом случае, я работал над сценарием для постепенного увеличения и уменьшения div с использованием z-index и animate. Он «работает» примерно после 2-3 щелчков, но первые два щелчка не исчезают и не анимируются, как я надеялся .... почему это так?

Я просто добавлю сюда javascript, но если вам нужно / нужно больше кода, просто дайте мне знать. Спасибо! 

$(document).ready(function() {

//Slide rotation/movement variables
var first = $('#main div.slide:first').attr('title');
var last = $('#main div.slide').length;
//Needed for the next/prev buttons
var next;

//Set the first div to the front, and variable for first div
var $active = $('#main div.slide[title='+first+']');

//Hide the links until the div is hovered over and take them away when mouse leaves
$('#main').children('a').hide();
$('#main').mouseenter(function() {
    $('#main').children('a').fadeIn(750);
    }).mouseleave(function() { 
        $('#main').children('a').fadeOut(750);
        });

$active.css('z-index', '4');

$('#main #next').click(function() {

    if ((next = parseInt($active.attr('title')) + 1) > last) {
        next = 1;
        }

    $active.css('z-index', '0').stop().animate({opacity: 0}, 1000);

    $active = $('#main div[title='+next+']').css('z-index', '4').stop().animate({opacity : 1}, 1000);

});

});

Извините, вот остаток кода HTML и CSS ... спасибо! 

#cust-care {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
position: relative;
margin: 0 auto;
width: 470px;
height: 175px;
}

custWidget {

margin: 0 auto;
overflow: hidden;
position: relative;
width: 470px;
height: 175px;
}

custWidget div {

position: absolute;
margin: 0;
height: 175px;
width: 470px;
background: #fff;
z-index: 0;
}

custWidget div.active {

z-index: 4;
}

custWidget div ul {

list-style: none;
padding: 25px 0 0 25px;
}

custWidget div ul li {

width: 140px;
float: left;
    list-style-type: none;
z-index: 5;
}

custWidget div ul li a {

position: relative;
display: block;
width: 140px;
color: #000;
text-decoration: none;
text-align: center;
}

custWidget #next {

position: absolute;
margin: 55px 0 0 430px;
padding: 5px;
display: block;
background: #000;
width: 35px;
height: 35px;
line-height: 35px;
color: #fff;
text-decoration: none;
z-index: 10;
}

custWidget #next: hover {

text-decoration: underline;
}

custWidget #prev {

position: absolute;
margin: 55px 0;
padding: 5px;
display: block;
background: #000;
width: 35px;
height: 35px;
line-height: 35px;
color: #fff;
text-decoration: none;
z-index: 10;
}

custWidget #prev: hover {

text-decoration: underline;
}

<div id="custCare">
<div id="custWidget">
    <a id="next">next</a>
    <a id="prev">prev</a>

    <div title="1" class="slide">
        <ul>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
        </ul>
    </div>

    <div title="2" class="slide">
        <ul>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
        </ul>
    </div>

    <div title="3" class="slide">
        <ul>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
            <li><a href="#"><img src="http://rlv.zcache.com/happy_smiley_face_sticker-p217917178253030841836x_250.jpg" style="width: 100px; height: 100px;" /><p>Support</p></a></li>
        </ul>
    </div>
</div><!--End main-->

1 Ответ

0 голосов
/ 08 февраля 2011

Попробуйте и дайте вашим кнопкам #next и #prev класс global 

$(document).ready(function() {

//Slide rotation/movement variables
var first = $('#main div.slide:first').attr('title'),
    last = $('#main div.slide').length,
    next;

//Set the first div to the front, and variable for first div
var $active = $('#main div.slide[title='+first+']');

//Hide the links until the div is hovered over and take them away when mouse leaves
$('.global').hide();
$('#main')
    .mouseenter(function() {
        $('.global')
            .fadeIn(750);
    }), $('#main')
            .mouseleave(function() { 
        $('.global')
            .fadeOut(750);
        });

$active
    .css('z-index', 4);

$('#next')
    .click(function() {

    if ((next = parseInt($active.attr('title')) + 1) > last) {
        next = 1;
        }

    $active
        .css('z-index',0)
        .stop()
        .animate({'opacity': 0}, 1000);

    $active = $('#main div[title='+next+']').css('z-index', 4).stop().animate({'opacity' : 1}, 1000);

    });
});
...