Перекрестные мыши css / jquery не работают после полного круга карусели jquery - PullRequest
1 голос
/ 22 августа 2011

У меня есть круговая карусель jquery, представляющая календарь на 9 дней с видимыми 5 днями. Каждый день представлен в вертикальной колонке. Стрелки вправо и влево контролируют вид на 5 дней. Карусель прекрасно работает во всех браузерах, за одним исключением. Как только вы переходите от столбца 9 к столбцу 1 (круговым способом), стилизация исчезает, а мои эффекты наведения исчезают. Если вы продолжите в том же направлении, столбцы будут отсутствовать, пока вы не вернетесь к column1 снова. Например, если вы нажимали следующую кнопку несколько раз после перехода из столбца / дня9 в столбец / день1, стили наведения мыши больше не будут работать в те дни, пока вы снова не достигнете столбца / дня1.

Длинный код - соз.

Я использую msCarousel отсюда: http://www.marghoobsuleman.com/jquery-ms-carousel

Jquery

$('p.testSpotImage').wrap('<div class="imageWrapper" />');
$('.imageWrapper').append('<div class="imageBackground"></div>');

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('.imageWrapper').each(function () {
    var tdHeight = $(this).closest('td').height();
    $(this).height(tdHeight);
});
$('.imageWrapper').css("width", "187px");
$('.imageWrapper').css("position", "relative");
$('.imageWrapper').css("top", "0");
$('.imageWrapper').css("clear", "both");
$('.imageWrapper').css("overflow", "hidden");

$('.imageBackground').css({ 'opacity': '0' });
$('.imageBackground').css("background-color", "#a43802");
$('.imageBackground').css("height", "100%");
$('.imageBackground').css("width", "100%");
$('.imageBackground').css("position", "absolute");
$('.imageBackground').css("top", "0");
$('.imageBackground').css("z-index", "1");

$('p.testSpotImage span.dayContentTitle').css({ 'opacity': '0' });

$('.imageWrapper').hover(
function () {
    $(this).find('.imageBackground').stop().fadeTo(200, 1);
    $(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 1);
    $('p.testSpot a .dayContentDay', this).css("color", "#fff");
    $('p.testSpot a', this).css("color", "#fff");
},
function () {
    $(this).find('.imageBackground').stop().fadeTo(200, 0);
    $(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 0);
    $('p.testSpot a .dayContentDay', this).css("color", "#333");
    $('p.testSpot a', this).css("color", "#333");
});


$('.dayContent').hover(
    function () {
        $(this).stop().animate({ backgroundColor: "#a43802" }, 200);
        $('p.testSpot a .dayContentDay', this).css("color", "#fff");
        $('p.testSpot a', this).css("color", "#fff");
    },
    function () {
        $(this).stop().animate({ backgroundColor: '#ffffff' }, 200);
        $('p.testSpot a .dayContentDay', this).css("color", "#333");
        $('p.testSpot a', this).css("color", "#333");
});

HTML ОТ ОДНОЙ КОЛОННЫ

<div class="contentColumnDay2">
    <table cellpadding="0" cellspacing="0" id="columnDay2">
        <tr>
            <td class="calendarHeader">
                <p><span class="dayHeader">Day 2</span><br />October 1, 2011</p>
            </td>
        </tr>
        <span id="ContentPlaceHolder1_labelDay2">
            <tr>
                <td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day3_3pm.jpg'>
                    <p class='testSpotImage'>
                        <a href='CalendarMiniDetail.aspx?id=36' rel='shadowbox;height=220;width=330'>
                            <span class='dayContentImageDay'>10</span>AM<br><span class='dayContentTitle'>Fashion Show Debut</span>
                        </a>
                   </p>
               </td>
           </tr>
        </span>
    </table>
</div>

1 Ответ

1 голос
/ 22 августа 2011

jQuery Carousel глючит, когда установлен круговой режим. Я думаю, что большая часть мира ждет обновления.

Вот что я сделаю. Похоже, что карусель восстанавливается после первого цикла, который уничтожит ваше событие при наведении курсора. Вместо этого попробуйте:

$('.dayContent').live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }

Это сохранит событие в этом классе, даже если перестроено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...