Как заставить jQuery «перезагрузить» себя при событии? IE8 и 9 отступов проблема? - PullRequest
Новая
       14

Как заставить jQuery «перезагрузить» себя при событии? IE8 и 9 отступов проблема?

0 голосов
/ 13 октября 2011

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

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

Нажав ссылку на панелисправа, например, The Atlantic Hotel, St Brelade's Bay Hotel или The Club Hotel & 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, о котором кто-нибудь знает?

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

Крис

Adapt Design

1 Ответ

1 голос
/ 13 октября 2011

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

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

$(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);
    });
});

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

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