• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jQuery Cycle und a:hover effekt

Joken

Neues Mitglied
Guten abend liebe Gemeinde,

ich habe ein kleines Problem.
Auf meiner Testseite sind mehrere JavaScripte aktiv:

Code:
jquery-1.4.2.min
> jquery.cycle.all.2.72
image.popup (wenn man einen link klickt öffnet sich ein neuer Tab mit einem Bild, ein kleines js.)
> cta.hover

Die beiden mit dem ">" sind die Problemkinder.
in dem cta.hover Script steckt folgende funktion

Code:
$(document).ready(function(){
  $('div.logo a')
    .css({  'backgroundPosition': '0 0' })
    .hover(
      function(){
        $(this)
          .stop()
          .animate({
            'opacity': 0
          }, 600);
      },
      function(){
        $(this)
          .stop()
          .animate({
            'opacity': 1
          }, 600);
      }
    );
});

Leider funktioniert diese aber nicht wie gewünscht. Wenn ich die jquery.cycle ausschalte, funktioniert die aber. Wie kann ich herausfinden wo die beiden Scripte sich verhaken so das ich beide funktionen nutzen kann?

Grüße & guten Abend
 
Werbung:
Leider funktioniert diese aber nicht wie gewünscht. Wenn ich die jquery.cycle ausschalte, funktioniert die aber. Wie kann ich herausfinden wo die beiden Scripte sich verhaken so das ich beide funktionen nutzen kann?

Bitte genaue Angaben machen. was funktioniert nicht wie gewünscht? Werden fehlermeldungen ausgespuckt? Bewegen sich die Links beim hovern garnicht? Machen sie irgend etwas anderes?

Ich kenne das andere Plugin nicht und weiss auch nicht genau wie jQuery die Events bei $(document).ready behandelt.
Wäre möglich, dass der cycle auch $(document).ready benutzt und deins damit überschreibt. Wenn dem nicht so ist müsste man den Quelltext von dem Plugin sehen und auch auf deine ausführlichere Fehlerbeschreibung warten ;)
 
Hey Gilles, erstmal danke für deine Antwort.

Ich habe mal im Source vom cycle nachgeschaut. Dort gibt es eine "$.isReady" jedoch keine, direkte, "$(document).ready()". Nur ein Kommentar mit:
Code:
// is your DOM ready?  http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Zur Fehlerbeschreibung:

Beide Scripte sind aktiviert. Das "cycle" funktioniert wie gewollt (Header wechselt im 6 Sekunden-takt mit dem Fade-effekt).
Mit dem cta.hover wollte ich eigentlich einen hover Fade-effekt bei einem Button erzeugen. Nun passiert da allerdings nichts. Wenn ich cta.hover rausnehme sehe ich einen direkten hover Effekt bei dem Button (ohne Fade - wie es mit *.css halt möglich ist).

Der Button ist so eingebunden:

Code:
<div id="footer">
	<div class="logo"><a href="#">Logo</a></div>
</div>

Im *.css steht das:
Code:
.logo {
  position:absolute;
  top:0px;
  left:0px;
  display:block;
  width:53px;
  height:50px;
  background:url('../img/bt/company_logo.png') no-repeat 0 -50px;
}

.logo a {
  display:block;
  width:100%;
  height:100%;
  background:url('../img/bt/company_logo.png') no-repeat 0 0;
  text-indent:-9999px;
}

.logo a:hover {
  background-position:0 50px;
}

die cta.hover habe ich ja oben schon gepostet, das ganze basiert halt auf der jQuery.
Du liegt bestimmt richtig mit der vermutung das sich eine bestimmte Funktion überschreibt.
Es liegt aber 100%'ig daran das sich die beiden Scripte keilen, wenn ich den Button ohne cycle laufen habe, funktioniert er wie gewünscht.
Ich werde noch ein wenig herumexperimentieren, wenn ich was hab melde ich mich - bin aber trotzdem für jeden Tipp dankbar.

Grüße.
 
Werbung:
Zurück
Oben