Блог

Я не очень разбираюсь в jQuery, может быть, это что-то простое… Я работаю над этим сайтом:

http://www.adaptdesign.com/misc/jtppwg/venuedirectory.html

Щелчок по ссылке на панели справа, например, The Atlantic Hotel, St Brelade’s Bay Hotel или The Club Hotel amp; Spa, прокручивает страницу вниз и загорается соответствующий DIV, без проблем. Это делается с помощью следующего jQuery:

 <script>
$(document).ready(function() {
    $("a.anchorHL").anchorAnimate()
});

$(document).ready(function() {
$("a.anchorHL").anchorAnimate().click(function() {
$('.venuedivhighlight').removeClass('venuedivhighlight');

$('a[name=' $(this).attr('href').substring(1) ']').next().addClass('venuedivhighlight');

});
});

</script>
  

CSS для venuedivhighlight выглядит следующим образом:

 .venuedivhighlight {
background-image: url(images/anim-bg-fade.gif);
}   
  

Желтое затухание выполняется с помощью анимированного GIF. Я знаю, что jQuery может добиться этого анимированного эффекта, но я не смог заставить его работать, поэтому, чтобы сэкономить время, я использовал это как обходной путь.

В Firefox это работает отлично, но во всех других браузерах выбранное место будет выделено один раз, а затем при последующих щелчках и прокрутках анимированный фон не будет перезагружаться. Я заметил, что при настройке приведенного выше CSS на красный фон его можно увидеть во всех браузерах (в FF красный появляется после анимации, а в других браузерах красный появляется сразу).

Есть идеи о том, как я могу заставить GIF обновляться при каждом нажатии?

Кроме того, мне бы хотелось немного больше отступов в желтом поле, т. Е. Больше места вокруг текста при выделении. Это нормально в большинстве браузеров, но при добавлении даже нескольких пикселей заполнения все это отображается как полный беспорядок в IE8 и 9 (в более ранних версиях, к сожалению, это выглядит идеально). Есть ли новый обходной путь проблемы с заполнением IE, о котором кто-нибудь знает?

Заранее большое спасибо.

Крис

Адаптировать дизайн

Чтобы ответить на ваш первый вопрос, я думаю, что лучше всего придерживаться вашего первоначального плана и анимировать цвет с помощью jQuery. Проблема, с которой вы, скорее всего, столкнулись, заключается в том, что jQuery не может сделать это из коробки. Чтобы анимировать цвет, вам нужна библиотека эффектов из jQueryUI. Ознакомьтесь с их документами здесь: http://jqueryui.com/demos/animate /

Итак, сначала вы загрузите пользовательский пакет jQueryUI, который включает библиотеку эффектов, и добавьте его на страницу, затем попробуйте что-то вроде этого:

 $(function() {
    $("a.anchorHL").anchorAnimate().click(function() {
        $('.venuedivhighlight').removeClass('venuedivhighlight');
        var $el = $('a[name='   $(this).attr('href').substring(1)   ']').next();

        // No need to set the class if the sole purpose is just to animate it later...
        $el.css({ backgroundColor: '#ff0000' });

        // Here's the magic
        setTimeout(function() {
            $el.animate({ backgroundColor: '#fff' }, 3000);
        }, 3000);
    });
});
  

Чтобы ответить на вторую часть вашего вопроса, если вы хотите добавить отступ, скажем, 5 пикселей, по краю вашего .ad-basic-cell divs, вам нужно будет вычесть не менее 10 пикселей из ширины, чтобы сделать это:

 .ad-basic-cell {
    width: 205px;
    float: left;
    padding: 5px;
}