मैं opacity: 0.5 को li में कैसे जोड़ सकता हूं, जब इसे क्लिक किया जाता है और एनीमेशन के साथ फिर से क्लिक करने पर अस्पष्टता को वापस opacity:1 पर टॉगल किया जा सकता है?

$('li').on('click', function () {
    $(this).animate({
        opacity: 0.5
    }, 500, function () {
        $(this).toggleClass('completed');
    });
});

क्या कक्षाओं के बीच टॉगल करने जैसा कोई सरल उपाय है या क्या मुझे वर्तमान अस्पष्टता की जांच करने और तदनुसार बदलने के लिए तर्क जोड़ने की आवश्यकता है? मैं मार्कअप या सीएसएस को बदलना नहीं चाहता लेकिन इसे jQuery के माध्यम से करना चाहता हूं।

1
Maihan Nijat 21 अप्रैल 2016, 21:42

3 जवाब

सबसे बढ़िया उत्तर

हम उसके लिए गणित का उपयोग कर सकते हैं :)

$('li').on('click', function () {
    $(this).animate({
        opacity: (0.5 / $(this).css("opacity"))
    }, 500, function () {
        $(this).toggleClass('completed');
    });
});
5
Hugo S. Mendes 21 अप्रैल 2016, 22:00

आप इसे निम्न की तरह कर सकते हैं।

$('li').on('click', function () {
    if ($(this).is(':animated')) return; //ignore click while animating
    
    var opacity = $(this).css('opacity') == 1 ? 0.5 : 1;
        
    $(this).animate({
        opacity: opacity
    }, 500, function () {
        $(this).toggleClass('completed');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>Click Here</li>
    <li>Click Here</li>
</ul>
3
Ibrahim Khan 21 अप्रैल 2016, 22:01

आपको बस एक झंडा चाहिए

$('li').on('click', function () {

    var opacity,
        flag = $(this).data('flag');

    if ( flag ) {
        opacity = 1;
    } else {
        opacity = 0.5;
    }

    $(this).animate({
        opacity: opacity
    }, 500, function () {
        $(this).toggleClass('completed');
        $(this).data('flag', !flag);
    });
});

(वास्तव में उद्देश्य पर क्रिया)

$('li').on('click', function () {

    var opacity,
        flag = $(this).data('flag');

    if ( flag ) {
        opacity = 1;
    } else {
        opacity = 0.5;
    }

    $(this).animate({
        opacity: opacity
    }, 500, function () {
        $(this).toggleClass('completed');
        $(this).data('flag', !flag);
    });
});
li {color : red; cursor: pointer; margin: 20px 0 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>Click to fade</li>
    <li>Click to fade</li>
    <li>Click to fade</li>
    <li>Click to fade</li>
    <li>Click to fade</li>
    <li>Click to fade</li>
</ul>

कम वर्बोज़ संस्करण

$('li').on('click', function () {
    var flag = $(this).data('flag');

    $(this).fadeTo(500, flag ? 1 : 0.5, function() {
        $(this).toggleClass('completed').data('flag', !flag);
    });
});
2
adeneo 21 अप्रैल 2016, 22:02