Geek Answers Handbook

JQuery remove / add CSS class

There are 5 tiles, if I click on one of them, it will open them (100% width), and when I click on X in the upper right corner, it will close it, which works great. but when it is open and I click the blue frame again, it will redefine the global vars, and onclick Close dose will no longer know the old position.

Fiddle here fiddle

HTML

<div class="tile" id="tp1">
    <img class="bus" src="http://s14.directupload.net/images/131130/4gzq9oaz.png" />
    <div class="close">x</div>
</div>

CSS

.tile, .tile_open {
    position: absolute;
    background-color:#0090db;
}

/*//////////////////////////////////////
        Tile Width And Location eddid here
///////////////////////////////////////*/
#tp1{
    width: 100px;
    height: 50px;       
}
/*//////////////////////////////////////
                IMG SIZE
///////////////////////////////////////*/
img {
    width: 100%;
    height: 100%;
}

/*//////////////////////////////////////
           Close Button
///////////////////////////////////////*/
.close {
    display: none;
    background-color:#C85051;
    position: absolute;
    top: 0;
    right: 5px;
    width: 50px;
    height: 25px;
    text-align: center;
}

.open .close {
    display: block;
}

JQuery

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         posT = $(this).css('top');

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open')
    $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});
+4
source share
4 answers

The main problem with your script is that when you click on blue img, it sets the starting position and that’s fine.

, , THAT WRONG.

, vars , , div .

DEMO

, :

$(".tile").on("click", function (e) { 
var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

e.stopPropagation();
if(!$(this).hasClass('open') ) {


$(".tile").on("click", function (e) { 
e.stopPropagation();
if(!$(this).hasClass('open') ) {
    var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

. z-index, , , div. . margin:0 (, )

var pos= $(this).offset();
     posL = pos.left,
     posT = pos.top;


var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

. ( offset , offset )

+1

- . , x, y, , x, y, .

JS, . http://jsfiddle.net/Nemesis02/2Zx3m/23/

$(".tile").on("click", function (e) { 
    var pos= $(this).position(),
        posL = $(this).css('left'), posT = $(this).css('top');

    var closeFunction = function (e) {
        e.stopPropagation();
        $(this).parent().stop().animate({
            "left" : posL,
            "top" : posT,
            "width": "100px",
            "height": "50px"
        }, 1000).removeClass('open')
        $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work
        $(this).unbind('close', closeFunction)
    };

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
        $(this).find(".close").on("click", closeFunction);
    }


});
+3

:

1. , tile_open

2.use offset()

http://jsfiddle.net/2jnM2/

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         //posT = $(this).css('top');
             posT = $(this).offset().top;

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open').removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});
+1

, :

    $(".tile").on("click", function (e) { 
    var $this = $(this),
        pos = $this.position();

    $this.data({
        posL: $this.css('left'),
        posT: $this.css('top')
    });

    e.stopPropagation();
    if(!$this.hasClass('open') ) {
        $this.animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')

    }

});



$(".close").on("click", function (e) {
    var $parent = $(this).parent();
    e.stopPropagation();
    $parent.stop().animate({
        "left" : $parent.data('posL'),
        "top" : $parent.data('posT'),
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open');


});

FIDDLE

0

More articles:


All Articles