On Jan 25, 7:45 am, tlob <[EMAIL PROTECTED]> wrote:
> I successfully implemented a simple drop down selection.
> Question:
>
> 1) If I change
> $("#tl,#ch,#sg,#mt").hide();
> to
> $("#tl,#ch,#sg,#mt").fadeOut();
> I end up with a nasty blinker effect, because the new image fades out
> while the new one fades in. How can I can this?
>
In order to make the fadeIn wait for the fadeOut, you have to "nest"
the effects:
$("#tl,#ch,#sg,#mt").fadeOut("slow", function () {
$("img#"+inhalt).fadeIn("slow");
});
> 2) Is it clean to let the
> <option value="none" selected="selected">choose...</option>
> execute, when I select it?
I don't see why not...
>
> 3) Can my jQuery be done simplyer?
>
> <code>===================
> css:
> #tl,#ch,#sg,#mt {display:none;}
#images img {display:none;}
>
> jQuery:
> $(document).ready(function(){
> $("#dropdown").change(function(event) {
> var inhalt = $("select option:selected").val();
> $("#tl,#ch,#sg,#mt").hide();
> $("img#"+inhalt).fadeIn("slow");
> console.log("img#"+inhalt);
>
> });
> });
I made some changes that implement the proper effect chaining:
$("#dropdown").change(function(event) {
var inhalt = $("select option:selected").val();
var visible = $("#images img:visible");
if (visible.size() > 0) {
visible.fadeOut('slow', function () {
$("img#"+inhalt).fadeIn("slow");
});
}
else {
$("img#"+inhalt).fadeIn("slow");
}
});
Notice the :visible selector...if you don't use that, you'll get some
funky effects =) Also, to make it easier to add additional images
without changing your JS code, I placed the images inside a div, with
an id of images...see below.
>
> html:
[snip]
> <img src="tl.jpg" alt="tl" id="tl" />
> <img src="ch.jpg" alt="ch" id="ch" />
> <img src="sg.jpg" alt="sg" id="sg" />
> <img src="mt.jpg" alt="mt" id="mt" />
>
> </code>===================
<div id='images'>
<img ... />
...
</div>
Give that a try and see if it is what you are looking for.
-Eric
