কীভাবে "ফিডআউট" এবং জিকুয়্যারিতে একটি ডিভিকে "অপসারণ" করবেন?

Question

আমি যখন কোনও চিত্র ক্লিক করা হয় তখন আমি একটি ডিভিডকে ফিডআউট প্রভাব দেওয়ার চেষ্টা করি এবং সেই ডিভ (আইডি = "বিজ্ঞপ্তি") মুছুন।

এইভাবে আমি এটি করছি:

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

মনে হচ্ছে এটি কাজ করছে না। এটি ঠিক করার জন্য আমার কী করা দরকার?

Comments

প্রশ্নের জন্য 15 ভোট এবং উত্তরের জন্য 55 টি ভোট ... এবং এটি স্পষ্টভাবে কেবল একটি টাইপো ছিল ... wtf?

— ইভান ক্যাসেলেলানোস

এখন 34 এবং 110 :)। এখানে অবতরণ করা হয়েছে কারণ কোনও উপাদানটির বিবর্ণ হওয়ার পরে আমি কীভাবে তা সরিয়ে ফেলতে জানতাম না (আপনি অনুমান করতে পারেন: আমি আরটিএফএম করিনি)।

— অরিক

টাইপ নির্বিশেষে, গুগলের ফলাফলগুলিতে প্রশ্নটি উপস্থিত হয় এবং আমি উত্তরগুলি যখন দ্রুত খুঁজে পাই তখন আমি আপভোট করি।

— ভালামাস

Answer 1

এটা চেষ্টা কর:

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

আমার মনে হয় আপনার চারপাশের ডাবল উক্তিগুলি onclickএটি কার্যকর করে তুলছে। :)

সম্পাদনা : নীচে উল্লিখিত হিসাবে, ইনলাইন জাভাস্ক্রিপ্টটি খারাপ এবং আপনার সম্ভবত onclickএটি এড়িয়ে যাওয়া এবং এটি jQuery এর click()ইভেন্ট হ্যান্ডলারের দিকে সরানো উচিত । আজকাল শীতল বাচ্চারা এটি করছে।

Comments

আপনার জাভাস্ক্রিপ্ট ইনলাইন ব্যবহার করা উচিত নয়, কারণ এটি ধারাবাহিক উপায়ে পরিবর্তন করা শক্ত করে।

— নিক বেরার্ডি

আমি এটাকে সমবেদনা জানাই না, আমি কেবল লোকটিকে তার সমস্যা থেকে মুক্ত করতে সাহায্য করছি। কখনও কখনও আমি প্রচার করি, আমি কেবল জেগে উঠেছিলাম এবং আমি "অতিরিক্ত মাইল" মুডে নেই। যদিও আপনার পোস্টটি কাজটি করে। :)

— পাওলো বার্গান্টিনো

অনক্লিক হ্যান্ডলারটি কীভাবে খারাপ তা আপনি কী ব্যাখ্যা করতে পারেন? এটি কি কেবল রক্ষণাবেক্ষণের কারণে বা কোনও প্রযুক্তিগত কারণ রয়েছে?

— পানজী

আপনি যখন কোনও পৃষ্ঠায় জাভাস্ক্রিপ্টের এক লাইন চান তখন কি সত্যিই আলাদা ফাইলের মূল্য হয়? আমি মনে করি ইনলাইন এর জায়গা আছে।

— কেসি

Answer 2

আপনার সত্যই ইনলাইন নয় পৃথক ফাইলে jQuery ব্যবহার করার চেষ্টা করা উচিত। আপনার যা প্রয়োজন তা এখানে:

<a class="notificationClose "><img src="close.png"/></a>

এবং তারপরে এটি আপনার পৃষ্ঠার নীচে <script>খুব স্বল্পতম সময়ে বা কোনও বাহ্যিক জাভাস্ক্রিপ্ট ফাইলটিতে ট্যাগগুলি।

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});

Comments

আমি এটি চেষ্টা করেছি কিন্তু এটি কাজ করতে পারেনি। উপরের ইনলাইন লিঙ্কটি কাজ করেছিল এবং দুটি কার্যত অভিন্ন ident এটি এখানে ... jsfiddle.net/AndyMP/DBrf5

— অ্যান্ডি

@Andy: সমস্ত আপনি jQuery থেকে গ্রন্থাগার সেট করতে ভুলে গেছি প্রথম;) দ্বিতীয়ত, আপনি আপনার সাইটে এটি ব্যবহার তুমিও এটি মোড়ানো প্রয়োজন $(document).ready(function() {এবং });। (জেএসফিডেলে এটি ওভারলোড তাই এটি আপনার পক্ষে এটি করে)

— নাথান

@ নিক বেরার্ডি, আমরা কি পৃষ্ঠা ডাউন স্ক্রোল দিয়ে এটি করতে পারি?

— সুপার মডেল

Answer 3

আপনি যদি এটি বিভিন্ন স্থানে ব্যবহার করেন তবে আপনার এটি প্লাগইনে পরিণত করা উচিত।

jQuery.fn.fadeOutAndRemove = function(speed){
    $(this).fadeOut(speed,function(){
        $(this).remove();
    })
}

এবং তারপর:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');

Comments

আমি কেবল এটি কীভাবে করব তা

— দেখছিলাম

Answer 4

আপনি কি এই চেষ্টা করেছেন?

$("#notification").fadeOut(300, function(){ 
    $(this).remove();
});

এটি হ'ল অভ্যন্তরীণ ফাংশনটিতে আইডি না করে উপাদানটিকে লক্ষ্য করতে বর্তমান এই প্রসঙ্গে ব্যবহার করুন using আমি এই প্যাটার্নটি সর্বদা ব্যবহার করি - এটি কাজ করা উচিত।

Answer 5

আপনি যদি আমার মতো কোনও গুগল অনুসন্ধান থেকে এসে শীতল অ্যানিমেশন সহ কোনও এইচটিএমএল উপাদানটি সরাতে চাইছেন তবে এটি আপনাকে সহায়তা করতে পারে:

$(document).ready(function() {
    
    var $deleteButton = $('.deleteItem');

    $deleteButton.on('click', function(event) {
    
        event.preventDefault();

        var $button = $(this);

        if(confirm('Are you sure about this ?')) {

            var $item = $button.closest('tr.item');

            $item.addClass('removed-item')

                .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    $(this).remove();
            });
        }
      
    });
    
});

/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>firstname</th>
        <th>lastname</th>
        <th>@twitter</th>
        <th>action</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="item">
        <td>1</td>
        <td>Nour-Eddine</td>
        <td>ECH-CHEBABY</td>
        <th>@__chebaby</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <th>@johndoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>3</td>
        <td>Jane</td>
        <td>Doe</td>
        <th>@janedoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
    </tbody>
  </table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


</body>
</html>

Answer 6

.fadeOut ('ধীর', এই। সরানো);

Answer 7

ব্যবহার

.fadeOut(360).delay(400).remove();

Comments

এটি কাজ করে না, removeপদ্ধতিটি তাত্ক্ষণিকভাবে কল হয়ে যায়fadeOut

— আইউলিয়ান ওনোফ্রেই