Если у вас есть классы, как описано в комментарии выше, вы должны поставить '.' перед ними вместо #. # означает идентификатор. означает класс.
$(document.ready(function() {
$(".logo1, .logo2, .logo3, .logo4").hover(function() {
var arrayOfClasses = $(this).attr('class').split(' ');
$(arrayOfClasses).each(function() {
if (this.indexOf("logo" > -1) {
$(".content" + this.slice(this.indexOf("logo") + 4)).fadeIn("slow");
}
});
}, function() {
var arrayOfClasses = $(this).attr('class').split(' ');
$(arrayOfClasses).each(function() {
if (this.indexOf("logo" > -1) {
$(".content" + this.slice(this.indexOf("logo") + 4)).fadeOut("slow");
}
});
});
});
Определенно, репликация кода, а не тестирование, но я думаю, что это будет делать то, что вы хотите. При наведении курсора на любой из этих элементов он возьмет рассматриваемый элемент, разделит классы этого элемента на массив, перебирает его для класса, включающего логотип, а затем постепенно увеличивает / уменьшает соответствующий нумерованный контент, вырезая число из конца название класса логотипа.
Редактировать на основе комментария ниже:
Если вы хотите, чтобы это было проще, что приведет к дополнительной репликации кода, вам просто нужно:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... для каждой пары. И, конечно, поместите его в $ (document.ready (function () {...});
Редактировать на основе второго комментария ниже:
Хорошо, я только что проверил, попробовав все ваши файлы локально, и проблема не в JavaScript, а в CSS / HTML. Попробуйте добавить это к вашему CSS:
#container div {
border: solid 1px #000000;
}
Вы обнаружите, что в Safari эти элементы div нигде не существуют, потому что они не расположены должным образом для Webkit, тогда как в Firefox они отображаются.
Также возможно, что «задержка», которую вы видите, является проблемой, когда все элементы div с классом content1-4 уже видны, и вы не можете начать видеть эффект, пока они сначала не исчезнут, а затем не вернутся обратно. Вы хотите установить их CSS для отображения: нет; и FadeIn JQuery сделает их видимыми.