[Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ

[fogza]

คลิ๊ก
เลื่องดูล่างสุดนะครับ ที่เป็นคอลั่มท้ายสุด ไม่ทราบว่าใช้ poproty ไหนของ css ครับ เวลา hover, visite แล้วมันดูนุ่มนวลดี ขอคำแนะนำด้วยครับน่าลองมากๆ  

[sakang]

jquery ทำได้ครับ hover ที่ li แล้วให้ + css left ตามกำหนด พอไม่ได้ hover ก็เอา left ลดตามค่าที่ + ไป

[~SolariS~]

css3 รึเปล่าครับ เหมือนจะเคยเห็นแว๊บๆ 

[bonshington]

$().mouseenter(fnction(){
  $(this).animate("padding-left", "+10px");
}).mouseleave(function(){
  $(this).animate("padding-left", "-10px");
});

ในเวปทำไม่ถูกซะทีเดียว เค้าลืม clear animate queue เวลาเอาเม้าลากรัวๆ animate มันจะซ้ำ และแสดงผลไม่ทัน

[cpengineer]

javascript แหงๆ ครับ
แต่เดี๋ยวนี้ css ก็น่าจะทำได้แล้วนะ

[Taurusz]

เป็น jQuery ครับ
ขอเสนออีกวิธีใช้ได้ดีเหมือนกันครับ

ต้องมีไฟล์ไลบารี่ของ jquery ก่อนนะครับ
แล้วก็นำ code ล่างนี้ไปใส่ระหว่าง tag <script ก็ได้ หรือแยกเป็น อีกไฟล์.js ก็ได้ครับ

$(document).ready(function(){

$('.caterogies ul li a').hover(function() { //ขณะเมาส์บนอยู่วัตถุ
    $(this).animate({ paddingLeft: '18px'}, 100);
  }, function() { //ขณะเมาส์ออกนอกวัตถุ
$(this).animate({  paddingLeft: '15px'}, 100);
  });

});

บริเวณตัวสีเขียวต้องเปลี่ยนเป็น ID หรือ Class ที่คุณกำหนดไว้
บริเวณสีสีแดงคือจำนวน padding ขณะเมาส์เหนือ ล่างขณะเมาส์ออก
บริเวณสีน้ำเงินคือความเร็วในการเคลื่อนไหว ยิ่งเยอะยิ่งช้า

[cpengineer]

มีน้ำใจ +1 ให้ท่านด้านบนครับ

[kenessar]

หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ)

li:hover {
      -moz-transform: translate( 10px, 0 );
      -webkit-transform: translate( 10px, 0 );
      -o-transform: translate( 10px, 0 );
      transform: translate( 10px, 0 );
}

อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ
แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ

[fogza]

หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ)

li:hover {
      -moz-transform: translate( 10px, 0 );
      -webkit-transform: translate( 10px, 0 );
      -o-transform: translate( 10px, 0 );
      transform: translate( 10px, 0 );
}

อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ
แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ

ครับ ผมกำลังศึกษา css3 อยู่ มีของใหม่ๆ มาให้เล่นเยอะเลย

เป็น jQuery ครับ
ขอเสนออีกวิธีใช้ได้ดีเหมือนกันครับ

ต้องมีไฟล์ไลบารี่ของ jquery ก่อนนะครับ
แล้วก็นำ code ล่างนี้ไปใส่ระหว่าง tag <script ก็ได้ หรือแยกเป็น อีกไฟล์.js ก็ได้ครับ

$(document).ready(function(){

$('.caterogies ul li a').hover(function() { //ขณะเมาส์บนอยู่วัตถุ
    $(this).animate({ paddingLeft: '18px'}, 100);
  }, function() { //ขณะเมาส์ออกนอกวัตถุ
$(this).animate({  paddingLeft: '15px'}, 100);
  });

});

บริเวณตัวสีเขียวต้องเปลี่ยนเป็น ID หรือ Class ที่คุณกำหนดไว้
บริเวณสีสีแดงคือจำนวน padding ขณะเมาส์เหนือ ล่างขณะเมาส์ออก
บริเวณสีน้ำเงินคือความเร็วในการเคลื่อนไหว ยิ่งเยอะยิ่งช้า

โค้ดนี้คือใช้ได้เลยใช่ไหม๋ครับ แล้วการแสดงผลแสดงผลเหมือนกันไหม๋ครับ พอจะมีตัวอย่างไหม๋ครับ?

$().mouseenter(fnction(){
  $(this).animate("padding-left", " 10px");
}).mouseleave(function(){
  $(this).animate("padding-left", "-10px");
});

ในเวปทำไม่ถูกซะทีเดียว เค้าลืม clear animate queue เวลาเอาเม้าลากรัวๆ animate มันจะซ้ำ และแสดงผลไม่ทัน

ขอแบบฉบับเต็มได้ไหม๋ครับ เรื่อง javascript หรือ JQuery กระผมยังไม่ได้ศึกษาเลยครับ 
ขอบคุณทุกท่านครับ น้ำใจงานซะเหลือเกิน เดี๋ยวจะแวะเวียน  1 ให้น้า 

[Taurusz]

ใช้ได้เลยครับ
แค่เรียกใช้ไลบารี่ jquery และก็เปลี่ยนชื่อ id ให้ตรงกับของคุณ
แสดงผลเหมือนกับตัวอย่างครับ ผมลองกับ jquery 1.3.2
ไม่มีอาการที่เอามาลากรั่วๆแล้วทำเกินครับ
ความเร็วในการเคลื่อนที่ก็ตามที่ผมได้บอกครับ

[fogza]

ขอบคุณครับ คงต้องโหลด jquery มาก่อน แล้วเรียกใช้ไลบารี่ใช่ไหม๋ครับ?
ปล. ผมซื้อหนังสือ jquery มาแต่ยังไม่มีเวลาศึกษาเลย 

[TonHaDy]

หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ)

li:hover {
      -moz-transform: translate( 10px, 0 );
      -webkit-transform: translate( 10px, 0 );
      -o-transform: translate( 10px, 0 );
      transform: translate( 10px, 0 );
}

อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ
แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ

ขอบคุนมากครับ