分裂之间淡入淡出

Question

I have a menu of 3 buttons, what i want to do is to make images of item11, item22 and item33 hidden. When i click on button a, item11 fade in, and if i click then on b item11 fade out and item22 fade in and so on.

I have this jsfiddle for the menu and divisions: https://jsfiddle.net/0rqzh404/1/

and i have this fade in/out function but i'm not sure how to connect to the html.

JQUERY:

$(document).on('click','#item1', function()
{


$("").fadeOut(1000, function(){
        $("").hide();
        $("").show();
        $("").fadeIn(1000);
    });

});

    $(document).on('click','#item2', function()
{ 
    $("").fadeOut(1000, function(){
        $("").hide();
        $("").show();
        $("").fadeIn(1000);
    });

});

    $(document).on('click','#item3', function()
{ 
    $("").fadeOut(1000, function(){
        $("").hide();
        $("").show();
        $("").fadeIn(1000);
    });

});

Any help please.

Answer 1

You should just work with the li buttons, and these will get the ID of the elements, so you would do something like this:

$(".item").hide();
$(".headlines li").click(function(){
    var el = $(this), id = el.attr("id").match(/\d+$/)[0], iditem = "#item" + id+id;
    $(".item").not(iditem).fadeOut(); //Hide elements
    $(iditem).fadeIn()//Just show one element
});

Demo JSfiddle

I remind you that I have had to replace ids like id="item11", id="item11", id="item11" to id="item11", id="item22", id="item33" , as these must be unique.

Answer 2

You have to target the element that you want to fade.

Here is an example: https://jsfiddle.net/LL6w28xx/1/

Also you can't have duplicate id on elements.

Answer 3

https://jsfiddle.net/0rqzh404/47/ Something like this? Using a single class like $('.btn') is an easy way too group multiple actions.