jquery anfänger brauch hilfe :)

[arees]

hallo,
ich bin gerade dabei jquery zu lernen, aber komme leider nicht so recht weiter. habe auch schon auf der homepage von jquery geschaut aber bin nicht so wirklich weitergekommen, weil es zum teil alles auf englisch ist

also ich möchte erstmal den grundaufbaufbau lernen also wohin die klammern müssen etc.

ich habe jetzt z.b. diesen script womit ich eine slideshow mit fadeIn effekt bauen möchte.

PHP-Code:

$(document).ready( function(){
    function slideshow(){
        $(".slider_image").fadeIn(1000,"slow",3000);
    });
}); 


was ist daran falsch?

warum macht man z.b. nach dem ready eine neue function die noch nichtmal ein namen hat?

kann mir wer vll helfen? würde mich über eine antwort sehr freuen

mfg arees

[Martin Kraft]

Zitat von arees

...weil es zum teil alles auf englisch ist

Ihr lernt doch Englisch in der Schule Das ist wichtig! Ohne Englisch wirst Du heute (nicht nur als Programmierer) nicht mehr weit kommen!

Zitat von arees

warum macht man z.b. nach dem ready eine neue function die noch nichtmal ein namen hat?

Das ist eine anonyme Funktion (gibt's in Flash auch), die der Funktion ready als Parameter übergeben wird. Statt die Funktion direkt zu übergeben könntest Du dort auch einfach eine Referenz reinschreibem:

PHP-Code:

function slideshow(){
    $(".slider_image").fadeIn("slow");
}

$(document).ready(slideshow); 


In dieser Funktion allerdings wieder eine Funktion reinzuschreiben, wie Du es getan hast, mach eigentlich keinen Sinn, weil die da einfach nur da steht und so garnicht ausgeführt wird.


P.S.: Eigentlich bist Du doch schon lang genug dabei um zu wissen, dass man hier im Forum Code als [CODE] oder [PHP] markieren sollte?!

[arees]

danke erstmal. Wofür ist denn der callback dar? also die 3000ms?

außerdem versteh ich nicht wie man das "pure" javascript von dem jquery trennt?!

[Martin Kraft]

Zitat von arees

Wofür ist denn der callback dar? also die 3000ms?

Oh, darauf hatte ich jetzt garnicht geachtet: "slow" und 3000 sind da natürlich Käse. Hier wird ein String erwartet, der das Easing beschreibt ("swing" oder "linear"), und eine CallBack-Funktion. Letzteres ist eine Funktion, die aufgerufen wird, sobald die Animation beendet ist. Das steht aber auch genauso in der jQuery-Dokumentation:

.fadeIn( [duration] [, easing] [, callback] )

duration A string or number determining how long the animation will run.
easing A string indicating which easing function to use for the transition.
callback A function to call once the animation is complete.

[...]

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

Zitat von arees

außerdem versteh ich nicht wie man das "pure" javascript von dem jquery trennt?!

JavaScript ist eine Script-Sprache und jQuery ein in dieser Sprache geschriebene Bibliothek. Die Syntax wird dabei von JS vorgegeben. jQuery stellt "nur" einige Methoden und Eigenschaften zur Verfügung, die einem das Arbeiten mit HTML und CSS in verschieden Browser leichter machen. jQuery ist dabei kein Standard, sondern nur das z.Z. erfolgreichste JS-Framework (es gibt noch etliche andere).

[speedjunkie]

Hier ist ne Seite für eine gute Freundin von mit im Aufbaustadium.

Da hab ich normales javaScript mit dem Framework gemischt für die google Maps API und dem <audio> Tag. Muss ich noch ausmüllen und bla aber vom Ding her.

Ich bin dabei einige Plug-in’s zu schreiben die ich halt für den gebrauch den Frameworks noch vermisse.

[arees]

code unten

[arees]

<script type="text/javascript">

var slideshow = document.getElementById("slideshow_content");
	var aufruf = 0;

$(document).ready( function(){
$("#next_img").click(function () {
	aufruf += 1;
      $(slideshow).animate ({
		  marginTop: "-=165px"
       }, 500, 'jswing', function() { 
  });
});	
});	

if(aufruf > 3)
{
      $(slideshow).animate ({
		  marginTop: "+=495px"
       }, 500, 'jswing', function() { 
	   
  });	
}

</script>

ich bin echt am verzweifeln. er ignoriert einfach die if anweisung. wenn ich das > in < umdrehe in der if anweisung funktioniert es... weiß jemand wieso es aber so wie es dort steht nicht funzt?

wäre echt dankbar wenn mir wer helfen könnte

mfg

[Martin Kraft]

Formatier' mal Deinen Code vernünftig , ...

PHP-Code:

<script type="text/javascript">

var slideshow = document.getElementById("slideshow_content");
var aufruf = 0;

$(document).ready( function() {
    $("#next_img").click(function () {
        aufruf += 1;
        $(slideshow).animate ( { marginTop: "-=165px" }, 500, 'jswing', function() { 
            // ?
        });
    });    
});    

if(aufruf > 3) {
    $(slideshow).animate ({    marginTop: "+=495px" }, 500, 'jswing', function() { 
        // ?
    });    
}

</script> 


dann siehst Du auch, dass diese if-Bedingung außerhalb der Funktionen steht, die bei ready und click aufgerufen werden. Sie wir also direkt ausgeführt und da vorher aufruf auf 0 gesetzt hast, ist aufruf an dieser Stelle eben niemals > 3.

[arees]

achso haste recht hätt ich aber auch früher draufkommen können.. danke

[Martin Kraft]

Sauberen Code zu schreiben, ist eben keine Schikane, sondern sorgt dafür, dass man schneller zu Lösungen kommt.

[arees]

nun brauch ich noch ein event was meine funktion aufruft

PHP-Code:

<script type="text/javascript">

var slideshow = document.getElementById("slideshow_content");
    var aufruf = 0;

$(document).ready( function(){
    aufruf += 1;
      $(slideshow).animate ({
          marginTop: "-=165px"
       }, 500, 'jswing', function() { 
           if(aufruf >= 3)
{
      $(slideshow).animate ({
          marginTop: "+=495px"
       }, 500, 'jswing', function() { 
  });    
  aufruf = 0;
}
  });
});    

</script> 


...welches benutz ich denn da? oder wie kann ich die funktion automatisch beim seitenaufruf laden und mit settimeout wiederholen?

[Martin Kraft]

Du klammerst Dir da einen zusammen
Versuch's mal so:

PHP-Code:

<script type="text/javascript">
var aufruf = 0;    

function showNext() {
    var aim;
    if (aufruf < 3) {
        aufruf++
        aim = "-=165px";
    } else {
        aufruf = 0;
        aim = "+=495px";        
    }
    
    $("#slideshow_content").animate ( { marginTop: aim }, 500, 'jswing');
}
    
$(document).ready( function(){
    $("#next_img").click(showNext);
    
    showNext();
});    

</script> 


[arees]

er soll aber von alleine anspringen und nicht erst wenn ich klicke also es gibt überhaupt kein "next" bzw. "prev" button

[Martin Kraft]

Zitat von arees

er soll aber von alleine anspringen und nicht erst wenn ich klicke also es gibt überhaupt kein "next" bzw. "prev" button

Das sollte er jetzt auch (zumindest einmal). Wenn Das kontinuierlich geschehen soll, musst Du eben ein Intervall erstellen, das diese Funktion aufruft!

[arees]

jo irgwie hatte es mit settimeout nicht geklappt... Mit setinterval gehts aber