CODEWITHSUNDEEP
jquery
Neox
Neox

Reputation: 87

Removing a Jquery Function on Click

I am using hoverizr http://www.iliasiovis.com/hoverizr/

Below is my code. I want $("a.hamburg>img") and $("a.karlsruhe>img") to toggle the hoverizr function so when they are clicked the function is removed and full color image is shown and when clicked again the function is added.

$( document ).ready(function() {
$("a.hamburg>img").hoverizr();
$("a.karlsruhe>img").hoverizr();
});

EDIT: On hover its goes color and hover out b/w again , that is fine, but on click it should be color and stay color that is what i want to achieve

Upvotes: 2

Views: 65

Answers (1)

Abhas Tandon
Abhas Tandon

Reputation: 1889

Idea: The plugin works by overlaying a canvas element over the image. The canvas generated by plugin has a class .canv This fact can be used to remove the effect generated by plugin. Following code handles a click event on the element and removes the required canvas when the event is triggered and thus it removes the effect generated by the plugin. 

$(document).ready(function() {
  $("a.hamburg>img").hoverizr();
  $("a.karlsruhe>img").hoverizr();
  $("a.hamburg>img,a.karlsruhe>img").click(function(){
     $(this).closest(".canv").remove();
  });
});

If you want to call it again on toggle try:

    var toggle=true;
    $(document).ready(function() {
      $("a.hamburg>img").hoverizr();
      $("a.karlsruhe>img").hoverizr();
      $("a.hamburg>img,a.karlsruhe>img").click(function(){
         if(toggle){
          $(this).closest(".canv").remove();
          toggle=false;
         }else{
            $(this).hoverizr();
            toggle=true;
         }
      });
    });

Upvotes: 1

Related Questions