[JQuery]Skromna edycja kodu

Dla specjalistów Webmastering
#1

Witam. Mam oto taki kod:

$(document).ready(function() {

	$('.fadeThis').append('').each(function () {

	  var $span = $('> span.hover', this).css('opacity', 0);

	  $(this).hover(function () {

	    $span.stop().fadeTo(500, 1);

	  }, function () {

	    $span.stop().fadeTo(500, 0);

	  });

	});

});[/code]


Według kodu klasa fadeThis zawiera obrazek i jego położenie. Klasa hover to zmiania tego obrazka. Jak mam zedytować kod jeżeli mam klasy zapisane tak:

[code] ul.klasa1 li { <------------ klasa która ma zamienić fadeThis w kodzie jquery … } ul.klasa2 li a:hover { <----------- klasa która ma zamienić hover w kodzie jquery … }

Sądzę, że powinienem dodać $(‘ul.klasa1 li’), ale niestety taki sposób nie działa. Od razu mówię, że raczkuję w jquery. Z góry dzięki za pomoc.

P.S Potrzebuję zamienić obydwie klasy w kodzie na te podane powyżej(poproszę o jasny przykład).

#2

Pokaż jeszcze HTML’a bo coś to zagmatwane.

#3

Może inaczej. Moje stare menu składa się z czegoś takiego:

CSS MOJE

ul.KLASA {

    margin: 0;

    padding: 0;

    float: left;

	cursor:default;

    list-style: none;

    height: 60px; /*--Set height of tabs--*/

    border-bottom: 1px solid #999;

    border-left: 1px solid #999;

    width: 100%;

}


ul.klasa li {

    float: left;

    margin: 0;

    padding: 0;

    height: 60px; /*--Subtract 1px from the height of the unordered list--*/

    line-height: 60px; /*--Vertically aligns the text within the tab--*/

    border: 1px solid #999;

    border-left: none;

    margin-bottom: -1px; /*--Pull the list item down 1px--*/

    overflow: hidden;

    position: relative;

    background: url("../images/1.png");

}

ul.klasa li a {

    text-decoration: none;

    color: #000;

    display: block;

    font-size: 1.2em;

    padding: 0 20px;

    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/

    outline: none;

}

ul.klasa li a:hover {

    background: url("../images/2.png");

}

html ul.Klasa li.active, html ul.Klasa li.active a:hover {

...

}

HTML I JQUERY [oryginalne które chcę przerobić]

[/code]

Jak widać składnia CSS różni się trochę od mojej. Ten podany w przykładzie jest prostszy. Generalnie skrypt JQuery opiera się na 2 głównych stylach(fadeThis i hover). U mnie natomiast odpowiednikiem jest: “ul.klasa li” i “ul.klasa li a:hover”. Moje pytanie brzmi: Jak zmienić te klasy podane w przykładowym kodzie JQuery(poprostu jak dodać przed klasą te ul li a, itp.)

#4

EDIT:

to podaj HTML’a do tego nad czym teraz pracujesz, te “ul” i “li”

#5

Nie zrozumiałeś. Poprostu zamień mi nazwy fadeThis i hover na ul.Klasa li i ul.klasa li a:hover , tak aby JQuery dobrze rozpoznawał klasy.

Jak zamieniam

$('.fadeThis')

na

$('ul.Klasa li')

To niestety kod nie działa oO – Dodane 22.07.2011 (Pt) 23:52 – Moje stare menu CSS które chce wkomponować w JQuery

ul.KLASA {

    margin: 0;

    padding: 0;

    float: left;

   cursor:default;

    list-style: none;

    height: 60px; /*--Set height of tabs--*/

    border-bottom: 1px solid #999;

    border-left: 1px solid #999;

    width: 100%;

}


ul.klasa li {

    float: left;

    margin: 0;

    padding: 0;

    height: 60px; /*--Subtract 1px from the height of the unordered list--*/

    line-height: 60px; /*--Vertically aligns the text within the tab--*/

    border: 1px solid #999;

    border-left: none;

    margin-bottom: -1px; /*--Pull the list item down 1px--*/

    overflow: hidden;

    position: relative;

    background: url("../images/1.png");

}

ul.klasa li a {

    text-decoration: none;

    color: #000;

    display: block;

    font-size: 1.2em;

    padding: 0 20px;

    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/

    outline: none;

}

ul.klasa li a:hover {

    background: url("../images/2.png");

}

html ul.Klasa li.active, html ul.Klasa li.active a:hover {

...

}
#6 
$(document).ready(function() {

   $('ul.klasa li').mouseenter(function(){

		$(this).children('a').stop().fadeTo(500, 1);

    }).mouseleave(function(){

		$(this).children('a').stop().fadeTo(500, 0);

    });

	$('ul.klasa li a').css('opacity',0);

});

??

#7

To chyba to. WIELKIE DZIĘKI Jim1961 ;). Jutro dokończę resztę skryptu(spróboje jakoś wkomponować resztę kodu którego wymodziłem). Jak coś to jutro napisze w tym wątku.