Utilisation de jQuery pour changer div largeur de 50% à 70% sur le vol stationnaire

J'ai deux divs qui ont 50% de la largeur de chacun. Je veux faire en sorte que les planait div étend à 70% et l'autre réduit à 30%. Et lorsque la souris se déplace, ils reviennent tous les deux à 50% chacun. J'ai écrit un script, mais il ne donne pas de bons résultats. Les largeurs sont de fluide de sorte qu'ils doivent s'ajuster à toutes les tailles de fenêtre. comment puis-je faire ce travail?

Je n'ai pas écrit le mouseout fonction pourtant, comme le passage de la souris ne fonctionne pas correctement.

Voici comment il fonctionne:
http://jsfiddle.net/kYZyp/

Voici mon code:

<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>

Voici mon code css de la div à l'

.content_left {
    width:50%;
    top:0px;
    left:0px;
    bottom:0px;
    background:url(wedding.jpg) left center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

.content_right {
    width:50%;
    top:0px;
    right:0px;
    bottom:0px;
    background:url(events.jpg) right center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

Et je suis en utilisant ce script:

<script>
$("#left").mouseover(function(){
  $("#left").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#right").animate({
    width: "30%"
  }, 1500 );
});

$("#right").mouseover(function(){
  $("#right").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#left").animate({
    width: "30%"
  }, 1500 );
});

</script>

Et y compris dans ce fichier jQuery:

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

OriginalL'auteur salmanhijazi | 2011-11-03

7

Ne sais pas si c'suites vous: http://jsfiddle.net/yCY9y/3/

DOM:
```
<div id="wrapper">
    <div id="left" class="content_left">LEFT</div><div id="right" class="content_right">RIGHT</div>
</div>
```
- Je utiliser le wrapper pour être sûr que nous ne jamais rompre la DROITE à la ligne suivante.

CSS:
```
#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 50%;
}
#left {
    background:red;
}
#right {
    background:yellow;
}
```
Que j'utilise sur #wrapper
```
white-space:nowrap; //Newer break whitespaces (break to the next line)
```
et
```
width:100%;
```
Sur #left, #right nous utilisons:
```
display:inline-block;
```
sorcière est d'abord compatible avec >IE6. (espère que ce n'est pas un problème).

JS:
```
$("#left, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #right").hover(function() {
    $(this).animate({
        width: "70%"
    }, 300 );
    $(this).parent().children().not(this).animate({
        width: "30%"
    }, 300 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth")
        }, 300 );
    });
});
```
J'ai d'abord Lier la même mouseover et mouseout événement sur les deux #right et #left
```
$(selector).hover(mouseOverHandler, mouseOutHandler);
```
...
```
$(this).parent().children().not(this)
```
Nous prenons l'élément de l'événement est déclenché jeter et trouve de tout, c'est les parents (#wrapper) childNodes: $(this).parent().children() Maintenant, nous filtrer le tout correspondant this à l'aide de jQuery not méthode. (this = #left OU #right) qui est l'élément. Maintenant, nous avons #right -> #left et #left -> #right.

La mouseOutHandler réinitialise tous #wrapper childNodes de largeur jusqu'à 50%

Espère que ceci vous mène de la bonne façon...

EDIT:

Si vous êtes à échéance de votre animation à la chaîne /la queue utiliser pouvez utiliser le stop méthode sorcière arrêter tous les actifs d'animations et d'effacer la file d'attente:
```
$(selector).stop().animate({
    ....
})
```
Qui fonctionne comme je veux que mon script. mais le problème se pose parce que je n'ai pas défini de largeurs. Je veux qu'il soit d'un design fluide. Comment puis-je obtenir les largeurs et les utiliser pour animer en conséquence?
Voir édité violon jsfiddle.net/yCY9y/3
Ok, j'ai reçu votre code fonctionne pour moi. Mais j'ai juste besoin de savoir comment je peux faire le div de la hauteur pour être à 100% tout le temps? Je veux qu'il soit fluide, de sorte que la hauteur remplit la fenêtre
Ai eu de travail, merci!!!!! 😀

OriginalL'auteur andlrc

Cela devrait fonctionner bien pour vous:

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
               $(this).css("width", "70%"); 
            },
            function(){
                $(this).css("width", "50%");
            }
        );                             
    });
</script>

MODIFIER: Ajout d'une animation

MODIFIER: Ajout de la hauteur de la redimensionner à l'animation

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : $("#container").height() + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="container" style="height:400px;border:1px solid #000;padding:10px;">
    <div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
        Hello world!
    </div>
</div>

MODIFIER: Si vous voulez remplir la hauteur de la fenêtre, il suffit d'utiliser window.innerHeight en place de la hauteur du conteneur:

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : window.innerHeight + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
    Hello world!
</div>

Voici un jsFiddle qui illustre ce fonctionnement.

Que vous pour la réponse, mais je veux qu'il ait une animation fluide, et je veux utiliser JQuery pour elle.
Copié sans vergogne votre code et ajout de l'animation: stackoverflow.com/questions/8003137/...
C'est l'effet que je veux, mais il ne fonctionne pas dans mon scénario. Je pense que c'est parce que je n'ai pas défini de largeurs, parce que je veux que la mise en page pour être fluide. Peut-être utiliser JS pour obtenir la largeur de la div et de les animer en conséquence?
Je pensais que vous étiez à l'aide d'un pourcentage de la largeur?
Et moi aussi je veux qu'il ait 100% de la hauteur. De sorte à ce qu'elle remplisse la fenêtre

OriginalL'auteur James Johnson

De prendre @James répondre (+1) et d'ajouter une animation, il suffit d'utiliser .animate():

$(function(){
    $("#div1").hover(
        function(){
           $(this).animate({width: '70%'});
        },
        function(){
            $(this).animate({width: '50%'});
        }
    );                            
});

Démo: http://jsfiddle.net/mattball/sAW2c/

OriginalL'auteur Matt Ball

Vous devez vous connecter pour publier un commentaire.