jQuery: Wie kann ich die Deckkraft eines Divs steuern, wenn ich über ein anderes div schwebe?

Question

Ich arbeite gerade an meiner Portfolio-Website, die eine sehr einfache Navigation verwendet. Allerdings möchte ich, dass der Schlagschatten unter dem Typ stärker wird (lies: höhere Opazität/dunkler), wenn der Typ aktiviert ist.

Im Moment sieht mein Code wie folgt aus und erzeugt keine Fehler, tut aber auch nichts.

Für ein gutes Verständnis dessen, was ich meine, bitte sehen Sie sich the website with a live example.

/* Work | Play | About | Contact */ 
/* Shadow Opacity */ 
$(document).ready(function() { 
    $('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo(0, 0.1); 
}); 

/* Shadow Hover effect */ 
$(document).ready(function() { 
    $('a#work').hover(function() { 
     $('#workShadow').fadeTo(200, 0.5); 
    }, function() { 
     $('#workShadow').fadeTo(400, 0.1); 
    }); 
}); 

/* Type movement on hovering */ 
$(document).ready(function() { 
    $('a.shift').hover(function() { //mouse in 
     $(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200); 
    }, function() { //mouse out 
     $(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400); 
    }); 
}); 

Grundsätzlich muß ich die Opazität der Schattenelemente (4 einzelne) bei 10% Opazität starten und während des Benutzers schwebt, die Art bewegt sich nach unten (dieser Teil funktioniert) und gleichzeitig wird der Schatten wird stärker, erhöht sich auf 60% Opazität. Dann stellen Sie bei mouseOut wieder auf 10% zurück.

Answer 1

Diese Zeile ist falsch - sie übergibt eine Reihe von Argumenten an die $()-Funktion.

$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo(0, 0.1); 

Da die documentation Noten, ist jQuery nicht N Argumente als Wähler erwarten, aber 1:

$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo(0, 0.1); 

Es ist üblich (und gut) Praxis eine Reihe von Objekten zu geben, die tun sollten etwas eine gemeinsame Klasse oder sie in einer klüger zu wählen als nur alle ihre IDs auflisten. Basierend auf dem aktuellen HTML, wird dieser Selektor alle Schatten <div> s im Menü, und ist viel kürzer - Sie müssen Ihren Code nicht ändern, wenn Sie später ein neues Menüelement hinzufügen, zum Beispiel:

$('div','#navigationFrame').fadeTo(0, 0.1); 

ich das sehen Sie auch haben:

<li id="work"><a id="work" ...> 

Das ist wirklich, wirklich falsch. IDs sollten im Dokument eindeutig sein. Wenn Sie mehr als eine ID im Dokument haben, brechen Sie nicht nur die Best Practices, die ID-Auswahl in jQuery wird verrückt und funktioniert nicht wie erwartet. Wie der fadeTo Selektor können Sie den Schatten zu ändern ändern Code zu einer saubereren:

$('a','#navigationFrame').hover(function() { 
    $(this).next('div').fadeTo(200, 0.5); 
}, function() { 
    $(this).next('div').fadeTo(400, 0.1); 
}); 

ich die Website mit diesen Änderungen getestet und es funktioniert gut.

Was die Selektoren in meinen Beispielen tun, ist die Nutzung von jQuerys context. Dadurch dies:

$('a','#navigationFrame'); 

Oder diese:

$('div','#navigationFrame'); 

Wir jQuery sagen: „Gib mir nur die <a> (oder <div>) Elemente innerhalb #navigationFrame

Es entspricht dies:.

$('#navigationFrame').find('a'); 

Es ist eine gute Idee davon profitieren. Ich sehe, dass Sie eine Tendenz haben, die Elemente manuell aufzulisten, die Sie versuchen, Dinge zu tun, selbst wenn sie irgendwie in irgendeiner Weise ähnlich sind.Versuchen Sie, diese Gewohnheit abzuschütteln, und lassen Sie die leistungsstarken Selektoren von jQuery aus dem Dokument erhalten, was Sie wollen.

Answer 2

Ich benutze diese:

$(".thumbs img").addClass('unselected_img'); 
$('.thumbs img').click(function() { 
    $(this).addClass('selected_img'); 
    if ($(this).is('selected_img')) { 
     $(this).removeClass('selected_img'); 
    } else { 
     $('.thumbs img').removeClass('selected_img'); 
     $(this).addClass('selected_img'); 
    } 
}); 

// hover the lists 

$('.thumbs img').hover(
    function() { 
     $(this).addClass('selected_img_h'); 
    }, 
    function() { 
     $(this).removeClass('selected_img_h'); 
});` 

und Stil:

.selected_img 
{ 
    opacity: 1; filter: alpha(opacity = 100); 
    border:none; 
} 

.selected_img_h{ 
    opacity: 1; filter: alpha(opacity = 100); 
    border:none; 
} 

.unselected_img 
{ 
    opacity: 0.6; filter: alpha(opacity = 60); 
    border:none; 
}