具有淡入淡出功能的网页单选按钮

Question

I have this script using jquery:

$(document).ready(function() {
    $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(1000, 1);
        }, function () {
    $span.stop().fadeTo(1000, 0);
        });
    });
});

I have this CSS code:

.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}

.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
}

This is my site My test site How can I make the buttons working as radio buttons so there will be third part of image which will show after click and hide after click on another button. And when clicked part is shown, the hover function should not work on this button. Is there a way to do that?

Answer 1

Not sure if I get you correctly but i guess something along this lines should help.

css:

.hover{display:none;}

script:

$('.a, .b, .c').each(function() {
    var $this = $(this);
    $span = $('<span class="hover"/>');
    $span.hover(function(){$(this).fadeIn()}, function(){ $(this).fadeOut()});
    $this.filter('a').click(function(e) {
        // do something with the click.
        e.stopPropagation(); e.preventDefault();
        $(this).hover = null; // you can save hover function in a var if you want to use it later.
    });
    $this.filter('b').click(function(e) {
        // do something with the click.
        e.stopPropagation(); e.preventDefault();
        $(this).hover = null; // you can save hover function in a var if you want to use it later.
    });
    $this.filter('c').click(function(e) {
        // do something with the click.
        e.stopPropagation(); e.preventDefault();
        $(this).hover = null; // you can save hover function in a var if you want to use it later.
    });

});

Answer 2

So now I have this:

Script:

$(document).ready(function() {
    $(".fg-button")
    .hover(
        function(){ 
            $(this).addClass("ui-state-hover");
        },
        function(){
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
            $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
            if( $(this).is('.ui-state-active') ){ $(this).removeClass("ui-state-active"); }
            else { $(this).addClass("ui-state-active"); }   
    })
    .mouseup(function(){
        if(! $(this).is('.fg-buttonset-single .fg-button') ){
            $(this).removeClass("ui-state-active");
        }
    });
});

CSS:

.fg-button {height: 56px; width: 126px; border: 0px; outline: 0px; cursor:pointer; position: relative; display:block;}
.ui-state-default { clear: both; background: url(images/Fotky.png) no-repeat; background-position: top;}
.ui-state-hover{background: url(images/Fotky.png) no-repeat; background-position: bottom;}
.ui-state-active {background: url(images/Fotky.png) no-repeat; background-position: center;}

HTML:

<div class="fg-buttonset fg-buttonset-single">
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>

This is working as I need but without fadeTo function. How can I implement it there to make it work as on example on top of this page? I made some tryes but no sucess.

Here how the test works http://airsoftbanda.tym.sk/css/test.php

Here how the fadeTo works http://airsoftbanda.tym.sk/css/index.php

Answer 3

Finally this is my final solution and it works as I need...

Script:

$(document).ready(function() {
    $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {

            $span.stop().fadeTo(1000, 1);
        }, function () {
    $span.stop().fadeTo(1000, 0);
        });

$(".fotky").mousedown(function(){
$(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
  $(this).addClass("fotkyk"); 
$span.stop().fadeTo(1000, 0);
end;    
    });

    $(".video").mousedown(function(){
    $(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
$(this).addClass("videok");
$span.stop().fadeTo(1000, 0);   
    });

CSS:

#tlacidlo {
height: 400px;
width: 126px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}
.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
    }
.fotkyk {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: center;
}

HTML:

<div id="tlacidlo">
<a href="#" class="fotky"></a>
<a href="#" class="video"></a>
<a href="#" class="diskusia"></a>
<a href="#" class="onas"></a>
<a href="#" class="zbrane"></a>
<a href="#" class="akcie"></a>
</div>

Of caurse it is only part of code because it is repeating almost same on script and css.