Autor Zpráva
Stanislav
Profil
Dobrý den, mám problém, snažím se udělat 3 divy, který mají každý vlastní identifikátor a chci aby se dal každý div jednotlivě posunovat. Zatím se mi to tak nedaří.
Zde Samotný příklad (Omlouvám se, jsem stylistické čuně):
HTML:
<!doctype html>
<html lang="cz">
  <head>  
    <meta charset="utf-8">  
    <title>pohybuj
    </title>


    <link rel="stylesheet" href="pohyb.css" media="all"/>  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
  <div id="1" class="kosticka">
    <div class="top" id="top1"></div>
    <div class="left" id="left1"></div>
    <div class="right" id="right1"></div>
    <div class="bot" id="bot1"></div>
  </div>
  <div id="2" class="trojuhelnik">
    <div class="top" id="top2"></div>
    <div class="left" id="left2"></div>
    <div class="right" id="right2"></div>
    <div class="bot" id="bot2"></div>
  </div>
  <div id="3" class="kolecko">
    <div class="top" id="top2"></div>
    <div class="left" id="left2"></div>
    <div class="right" id="right2"></div>
    <div class="bot" id="bot2"></div>
  </div>

     

<script> 
$( "#right1" ).click(function() {
  $( "#1" ).animate({ "left": "+=50px" }, "fast" );
}); 
$( "#left1" ).click(function(){
  $( "#1" ).animate({ "left": "-=50px" }, "fast" );
  </script>
  <script>
}); 
$( "#top1" ).click(function() {
  $( "#1" ).animate({ "margin-top": "-=50px" }, "fast" );
}); 
$( "#bot1" ).click(function(){
  $( "#1" ).animate({ "margin-top": "+=50px" }, "fast" );
}); 
</script> 
<script> 
$( "#right2" ).click(function() {
  $( "#2" ).animate({ "left": "+=50px" }, "fast" );
}); 
$( "#left2" ).click(function(){
  $( "#2" ).animate({ "left": "-=50px" }, "fast" );
}); 
</script>
<script>
$( "#top2" ).click(function() {
  $( "#2" ).animate({ "margin-top": "-=50px" }, "fast" );
}); 
$( "#bot2" ).click(function(){
  $( "#2" ).animate({ "margin-top": "+=50px" }, "fast" );
}); 
</script> 
<script> 
$( "#right3" ).click(function() {
  $( "#3" ).animate({ "left": "+=50px" }, "fast" );
}); 
$( "#left3" ).click(function(){
  $( "#3" ).animate({ "left": "-=50px" }, "fast" );
}); 
</script>
<script>
$( "#top3" ).click(function() {
  $( "#3" ).animate({ "margin-top": "-=50px" }, "fast" );
}); 
$( "#bot3" ).click(function(){
  $( "#3" ).animate({ "margin-top": "+=50px" }, "fast" );
}); 
</script> 
    </div>
  </body>
</html>
CSS:
.kosticka{
height:80px;
width:80px;
position:absolute;
background:url("./ctverecek.jpg");
}
.trojuhelnik{
height:80px;
width:80px;
position:absolute;
background:url("./trojuhelnik.jpg");
}
.kolecko{
height:80px;
width:80px;
position:absolute;
background:url("./kolecko.jpg");
}
.top{
height:5px;
width:10px;
float:top;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.left{
height:10px;
width:5px;
float:left;
background-color:red;
margin-top:35px;
}
.right{
height:10px;
width:5px;
float:right;
background-color:red;
margin-top:35px;
}
.bot{
height:5px;
width:10px;
float:bottom;
background-color:red;
margin-top:70px;
margin-left:auto;
margin-right:auto;
}



a výsledek je zde:
http://alloutdubstep.ic.cz/pohybuj.html
Monkeys
Profil *
Stanislav:
Kazdem classu pridaj napr. slide

a potom napr.
$(".slide").click(function()
{
$(this).slideDown("slow");
});

M.
kaktuss
Profil
Možno ti to nefunguje, pretože sa všetky 3 div-y prekrývajú.
Pozri upravenú ukážku tu: http://jsfiddle.net/8GjR8/

Mimochodom, float atributy "top" a "bottom" neexistujú.
Stanislav
Profil
kaktuss, Překrývají se, ale po odsunutí prvního objektu by se měl zobrazit další, a ten by měl také jít odsunout a tím se následně ukáže třetí.
Atributy float top a bottom byl jen výkřik do tmy, pak jsem to udělal marginem a nesmazal to.


Monkeys:
Děkuji, toto vypadá lépe, tak snad se mi to podaří, možná lepší než přes animaci.


kaktuss:
http://jsfiddle.net/L3M6V/
Jde to s Dvěma kostičkama, ale s tím třerím už ne. to samé co mi dělá přímo u mě.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: